Load directive after AJAX call - angularjs

Question

I have build a directive for pagination that takes two arguments; the current page and the total number of pages.
<pagination page="page" number-of-pages="numberOfPages"></pagination>
The issue is that I will only know the value of numberOfPages after an AJAX call (through ng-resource). But my directive is already rendered before that the AJAX call is done.
app.controller('MyController', function ($scope, $routeParams) {
$scope.page = +$routeParams.page || 1,
$scope.numberOfPages = 23; // This will work just fine
MyResource.query({
"page": $scope.page,
"per_page": 100
}, function (response) {
//This won't work since the directive is already rendered
$scope.numberOfPages = response.meta.number_of_pages;
});
});
I prefer to wait with the rendering of my controllers template until the AJAX call is finished.
Plan B would be to append the template with the directives template when the AJAX call is done.
I'm stuck working out both scenarios.

Answer 1

But isn't it possible to just prevent the rendering until all is done
I think ng-if would do that, contrary to ng-show/ng-hide which just alter the actual display

Answer 2

You have to wait for the value using a $watch function like:
<div before-today="old" watch-me="numberOfPages" >{{exampleDate}}</div>
Directive
angular.module('myApp').directive('myPagingDirective', [
function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
scope.$watch(attr.watchMe,function(newValue,oldValue){
//check new value to be what you expect.
if (newValue){
// your code goes here
}
});
}
};
}
]);
Imporant: Your directive may use an isolated scope but even so the same principle stands.

Answer 3

If you use resolve from ui-router, you can have meta or meta.number_of_pages injected in your controller BEFORE it's view gets rendered.
//routes.js
angular.module('app')
.state('some_route', {
url: '/some_route',
controller: 'MyController',
resolve: {
meta: ['MyResource', function (MyResource) {
return MyResource.query({
"page": $scope.page,
"per_page": 100
}, function (response) {
return response.meta;
});
}]
}
});
//controllers.js
app.controller('MyController', function ($scope, $routeParams, meta) {
$scope.page = +$routeParams.page || 1,
$scope.numberOfPages = meta.number_of_pages;
});