<!DOCTYPE html>
<html ng-app="MyApp">
  <head>
    <!--<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />-->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="IndexController">
    <table class="table table-bordered">
        <tr>
          <th class="endTime" ng-model="monday.endTime"></th>
            <tr>
              <th>Sunday</th>
              <td ng-repeat="d in data.sunday track by $index">Start time: {{ d.startTme }} End time: {{ d.endTime }} Period: {{ d.period }} Duration: {{ d.duration }}</td>
      </table>
  </body>

</html>
(function ()
 {
    'use strict';
    	angular
        .module('MyApp', [])  
        .controller('IndexController', ['$scope', '$http', '$location', '$rootScope', function($scope, $http, $location, $rootScope){  
            $scope.test = "hello";
            var tableLen;
            $scope.college_id='583b01ce6864990011c12ec6';
            $http.get('test.json')
            .success(function(response){
                $scope.data = response;
                console.log($scope.data);
            });

    }]);
   
 })();
/* Styles go here */

{ "sunday": [
        {
          "endTime": "08:50 AM",
          "startTime": "08:00 AM",
          "duration": "50",
          "period": "A"
        },
        {
          "endTime": "08:50 AM",
          "startTime": "08:00 AM",
          "duration": "50",
          "period": "A"
        }
      ]
}