AngularJs controller doesn't wait for $http request

Question

I'm new to Angular and a little confused with promises. I've created a custom directive that should show the information coming from a remote web service.

Here's a factory responsible for data retrieval :

myAppModule.factory('Data', function ($http)
{
    var PID = 7499;
    return $http({method: "GET", url: "http://localhost:7001/Nama/services/helloworld/bookingInit", params: {pid: PID}});
});

This is the directive that should show the information coming from this service :

    myAppModule.directive("timePeriods", function ()
{
    return {
        restrict: 'E',
        templateUrl: 'timePeriods.html',
        controllerAs: 'periodsCtrl',
        controller: ['Data', function (Data)
        {
            Data.success(function (res)
                                     {
                                         this.periods = res.appointments;
                                     });
        }]
    }
});

finally here's the template for the directive :

<table class="table table-bordered" ng-class="'noselect'">
  <td colspan="2">
    <h4>TIMESLOTS</h4>
  </td>
  <tr ng-repeat="period in periodsCtrl.periods">
    <td>
      <div>{{period.start | date : 'hh:mm'}} - {{period.end | date : 'hh:mm'}}</div>
    </td>
  </tr>
</table>

So I expect the information from the service to be displayed in a table, but when the page is rendered this table is empty..

Answer 1

You need to use scope.$apply for the changes to take effect. AngularJS and scope.$apply