How to display json data to table on Html page using angularjs - html

Question

please im trying to display my json file on html page using angularjs to get the data from a source and displaying the data on a table format whenever the respective link to the data is clicked. I'm new to angular.
---this is my app.js file---
var app = angular.module('dapp',['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'templates/home.html',
controller: 'homeController'
})
// route for the about page
.when('/facilities', {
templateUrl: 'templates/facilties.html',
controller: 'facilitiesController'
});
});
----this is my facilities.html page----
<div class="span3">
<ul class="nav nav-list well">
<li ng-repeat="facility in facilities" ng-bind="facility.Province">
</li>
</ul>
<!--<div ng-repeat="facility in facilities" ><div>Type:{{facility.type}}-->
</div>
<div class="table">
<p ng-hide="facilities">No facility found</p>
<table class="table table-striped table-bordered table-hover" ng-show="facilities">
<thead>
<tr>
<th>Facility Id</th>
<th>Name of Facility</th>
<th>Municipality</th>
<th>Province</th>
<th>Year of Construction</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="facility in facilities">
<td class="span2" ng-bind="facility.id">{{facility.id}}</td>
<td class="span2" ng-bind="facility.name">{{facility.name}}</td>
<td class="span2" ng-bind="facility.municipality"></td>
<td class="span2" ng-bind="facility.province">{{facility.province}}</td>
<td class="span2" ng-bind="facility.yearOfConstruction"></td>
</tr>
</tbody>
</table>
<div class="row controls">
<form ng-click="fetchFacilities()">
<input type="submit" class="btn btn-primary btn-lg" value="indoor sport facilities">
</form>
</div>
</div>
-----this is the function i created for fetching the data----
$scope.fetchFacilities = function() {
$http.get("thesis-folorunsho.c9users.io/facility").then(function(response) {
console.info('Facilities:', response.data);
$scope.facilities = response.data;
});
};