<!DOCTYPE html>
<html>
<head>
<title>Wikitechy AngularJS Tutorials</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"> </script>
</head>
<body>
<div ng-app="myApp" ng-controller="tableCtrl">
<h3>Table with JSON in AngularJS</h3>
<table border="1">
<tr>
<th>S.No</th>
<th>ID</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr ng-repeat="x in content | orderBy : 'name'">
<td>{{$index+1}}</td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("tableCtrl", function($scope, $http) {
$http.get("my-json.json")
.then(function(response) {
$scope.content = response.data.records;
});
});
</script>
</body>
</html>
