Angularjs directive parses controllers collection

Working on pager directive in angularjs. When I hard code sample collection ($scope.installations) everything is OK, but when I pull data from server 'options' property in directive is always 'undefined'.

Here is my directive: 

angular.module("qusion.ui.pager", [])
    .directive("qnPager", [
        function() {
            return {
                restrict: 'A',
                link: function(scope, element, attrs) {
                    var options = scope.$eval(attrs.qnPager);
                    var settings = {
                        source: null,
                        paging: null,
                        schema: {
                            page: 'PageNumber',
                            size: 'Size',
                            totalPages: 'TotalPages',
                            totalCount: 'TotalCount'
                        }
                    };

                    angular.extend(settings, options);


                    scope.$watch(settings.source, function(value) {
                        console.log(settings.source); // UNDEFINED ???
                    });

                }
            };
        }
    ]);

Here is how I am calling it.

<ul qn:pager="{source: installations}">

And finally my controller sample

function MyController(Installation){
   $scope.installations = [];
   // get sample (this works)
   // $scope.installations = [{ID: 1, Title: 'Test 1'}, {ID: 2, Title: 'Test 2'}]
   // get from server (this don't work)
   Installation.getAll().then(function(data) {
       $scope.installations = data.Installations;
   });

}

See if this solves your problem:

Instead of assigning a new data array to installation -- i.e., instead of $scope.installations = data.Installations; -- try populating the same array. When you assign a new data array to installations, you may be losing the bindings to the old array -- i.e., the directive may still be bound to the previous data array.

$scope.installations.length = 0
for(var i = 0; i < data.Installations.length; i++){
    $scope.installations.push(data.Installations[i]);
}

See http://stackoverflow.com/a/12287364/215945 for more info.

Update: angular.copy() can/should be used instead:

angular.copy(data.Installations, $scope.installations);

When a destination is supplied to the copy() method, it will first delete destination's elements, and then copy in the new ones from source.