Render json in table using AngularJs

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="businessHours">
    <p>    Click <a ng-click="loadHours()">here</a> to load data.</p>
<div class="container">

         <h2>Business Hours</h2>
         <example example-attr="xxx"></example>
         <table class="table table-bordered">
             <tr>
               <th></th>
             <th style="vertical-align:top" scope="col" colspan="2">Sales</th>
            <th style="vertical-align:top" scope="col" colspan="2" >Service</th>
           <th style="vertical-align:top" scope="col" colspan="2">Parts</th>
            <th style="vertical-align:top" scope="col" colspan="2">Accounting</th>
             <th style="vertical-align:top" scope="col" colspan="2">Body Shop</th>
             <th style="vertical-align:top" scope="col" colspan="2" >Other</th>
             </tr>
                </tr><tr ng-repeat="day in weekdays"><td>{{day}}</td>>
                <td ng-repeat-start="hours in businessHours" hello-world hours="businessHours">{{hours.startTime}}</td>
                  <td ng-repeat-end>{{hours.endTime}}</td>
                </tr>

CSS

table {
  border: 1px solid #666;
  width: 100%;
}

th {
  background: #f8f8f8;
  font-weight: bold;
  padding: 2px;
}

JavaScript

var times = {};
var dept = {
  sales: {
    startTime: "5",
    endTime: "6"
  },
  service: {
    startTime: "-1",
    endTime: "-2"
  },
  accounting: {
    startTime: "4",
    endTime: "2"
  },
  parts: {
    startTime: "",
    endTime: ""
  },
  bodyShop: {
    startTime: "8",
    endTime: "9"
  },
  other: {
    startTime: "-5",
    endTime: "-6"
  },
};


var mockDataForThisTest = "json=" + encodeURI(JSON.stringify(dept));


var app = angular.module('myApp', [])
  .controller("businessHours", businessHours);

function businessHours($scope, $http) {
  $scope.weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
  $scope.loadHours = function() {
    var httpRequest = $http({
      method: 'POST',
      url: '/echo/json/',
      data: mockDataForThisTest

    }).success(function(data, status) {
      $scope.businessHours = data;
    });

  };

}
app.directive('helloWorld',function($parse){

  return {
      scope :{

      hours:"="
       },
  template:'<td style="table-layout:fixed;" ng-click="showInputBox($event)">{{hours}} <div  ng-show="isChecked"><input type="text" style="width:89px;" class="form-control" time="hours" ng-change="saveTime($event)" ng-model="time" ui-timepicker></div><div ng-hide="isChecked"> <p>{{hours | date:"shortTime"}} </p></div></td>',
  replace:true,
  controller:function($scope){
        

       $scope.showInputBox = function ($event) {                  
          $scope.isChecked = true;

        };
        $scope.saveTime = function($event){                        
          $scope.isChecked = false;
          
        };

       }
  };
});