I have a html table that allows users to enter a time using a plugin. I can load the data externally using a JSON all the fields populate as I would like. The problem arises when I add my directive. The values are removed or invisible by the directive. I have added the directive to one column for illustrative purposes. My goal is to allow the user to click on a cell and an input box would appear, user then enters the time, and the time is saved. This has mostly been accomplished via the directive, but I am unable load the data with the directive.

```
    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;

        };

       }
  };
});

```

html table

```
 <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.startTime}}</td>
          <td ng-repeat-end>{{hours.endTime}}</td>
        </tr>

```

my controller

```
   app.controller('main', ['$scope', '$location',  function ($scope,$location) {

      $scope.weekdays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday"];
      $scope.businessHours = {
        sales : { startTime : "5", endTime : "6" },
        service : { startTime : "-1", endTime : "-2" },
        accounting : { startTime : "4", endTime : "2" },
        parts : { startTime : "7", endTime : "8" },
          bodyShop : { startTime : "8", endTime : "9" },
        other : { startTime : "-5", endTime : "-6" },
    };

My fiddle http://jsfiddle.net/yu216x5w/45/

```

Hopefully, I have explained this well enough. Any help will be greatly appreciated. I have just started working on Angular for this project.