<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container well">
<h3 class="text-primary">Images in table using ng-src</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Capital</th>
<th>Currency</th>
<th>Flag</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="country in countries">
<td>{{country.Name}}</td>
<td>{{country.Capital}}</td>
<td>{{country.Currency}}</td>
<td><img ng-src="{{country.Flag}}" width="50" height="30" /></td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myController', ['$scope', function ($scope) {
$scope.countries = [{ Name: "India", Capital: "New Delhi", Currency: "Indian rupee", Flag: "http://learnit.visrosoftware.com/datafiles/India.png" },
{ Name: "Afghanistan", Capital: "Kabul", Currency: "Afghani", Flag: "http://learnit.visrosoftware.com/datafiles/Afghanistan.png" },
{ Name: "Nepal", Capital: "Kathmandu", Currency: "Nepalese rupee", Flag: "http://learnit.visrosoftware.com/datafiles/Nepal.png" },
{ Name: "Pakistan", Capital: "Islamabad", Currency: "Pakistani Rupee", Flag: "http://learnit.visrosoftware.com/datafiles/Pakistan.png" },
{ Name: "Japan", Capital: "Tokyo", Currency: "Yen", Flag: "http://learnit.visrosoftware.com/datafiles/Japan.png" },
{ Name: "France", Capital: "Paris", Currency: "Euro CFP franc", Flag: "http://learnit.visrosoftware.com/datafiles/France.png" },
{ Name: "Italy", Capital: "Rome", Currency: "Euro", Flag: "http://learnit.visrosoftware.com/datafiles/Italy.png" }];
}]);
</script>
</body>
</html>
