title: How to display json data to table on Html page using angularjs
body: <p>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.</p>
  
  <p>---this is my app.js file---</p>
  
  <pre><code>  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'
          });
  
      });
  </code></pre>
  
  <p>----this is my facilities.html page----</p>
  
  <pre><code>&lt;div class="span3"&gt;
      &lt;ul class="nav nav-list well"&gt;
          &lt;li ng-repeat="facility in facilities" ng-bind="facility.Province"&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;!--&lt;div ng-repeat="facility in facilities" &gt;&lt;div&gt;Type:{{facility.type}}--&gt;
  
  &lt;/div&gt;
  
  &lt;div class="table"&gt;
      &lt;p ng-hide="facilities"&gt;No facility found&lt;/p&gt;
      &lt;table class="table table-striped table-bordered table-hover" ng-show="facilities"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Facility Id&lt;/th&gt;
                  &lt;th&gt;Name of Facility&lt;/th&gt;
                  &lt;th&gt;Municipality&lt;/th&gt;
                  &lt;th&gt;Province&lt;/th&gt;
                  &lt;th&gt;Year of Construction&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="facility in facilities"&gt;
                  &lt;td class="span2" ng-bind="facility.id"&gt;{{facility.id}}&lt;/td&gt;
                  &lt;td class="span2" ng-bind="facility.name"&gt;{{facility.name}}&lt;/td&gt;
                  &lt;td class="span2" ng-bind="facility.municipality"&gt;&lt;/td&gt;
                  &lt;td class="span2" ng-bind="facility.province"&gt;{{facility.province}}&lt;/td&gt;
                  &lt;td class="span2" ng-bind="facility.yearOfConstruction"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;div class="row controls"&gt;
          &lt;form ng-click="fetchFacilities()"&gt;
              &lt;input type="submit" class="btn btn-primary btn-lg" value="indoor sport facilities"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>-----this is the function i created for fetching the data----  </p>
  
  <pre><code>$scope.fetchFacilities = function() { 
       $http.get("thesis-folorunsho.c9users.io/facility").then(function(response) {
           console.info('Facilities:', response.data);      
           $scope.facilities = response.data;      
       }); 
  };
  </code></pre>