AngularJS : Why the data is not displayed in view may I use $scope.apply?

Question

I am getting data from service and display on view using ng-repeat .Actually I am getting event when user scroll to bottom mean when user reached to bottom I will do something.When It reached to bottom I am changing the contend of my array .I am getting the correct contend in ng-repeat array (display array) but it is not reflect on view why ? May I use $scope.apply() or $scope.digest()

Here is my code

http://plnkr.co/edit/XgOxJnPXZk4DneJonlKV?p=preview

Here I am changing the contend of my display array which is not reflect on view

if (container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight) {
            if(scope.var<scope.arrays.length)
            scope.display=[];
            var nextvar =++counter;
            var increment=counter+1
            console.log("nextvar:"+nextvar+"increment:"+increment)
            scope.display=scope.arrays[nextvar].concat(scope.arrays[increment]);
           console.log(scope.display)
          }

Answer 1

As @Claies mentioned you should use apply(). Though the digest() would probably have worked as well.apply() calls digest() internally. He also mentioned that your variable that seems to be storing the page number gets reset to 0 each time you scroll. You should store that in a scope variable outside that handler. I tried to fix with minimum change

http://plnkr.co/edit/izV3Dd7raviCt4j7C8wu?p=preview

 .directive("scrollable", function() {
    return function(scope, element, attrs) {
      var container = angular.element(element);
      container.bind("scroll", function(evt) {
        console.log('scroll called'+container[0].scrollTop);
        var counter = scope.page;
        if (container[0].scrollTop <= 0) {
          if (scope.var > 0)
            scope.display = scope.arrays[--scope.var].concat(scope.arrays[scope.var+1]);

        }

        if (container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight) {

          if (scope.var < scope.arrays.length)
            scope.display = [];
          var nextvar = ++counter;
          var increment = counter + 1
          console.log("nextvar:" + nextvar + "increment:" + increment)
          scope.display = scope.arrays[nextvar].concat(scope.arrays[increment]);
          console.log(scope.display)
          scope.page = counter;
        }
        scope.$apply();
      });
    };
  })

generally I would have implemented this differently. For example by having a spinning wheel on the bottom of the list that when displayed you get the rest of data. It is difficult to give you a full working plunker. Probably you should have multiple JSON files in the plunker, each containing the data for one page so that we can add the data to the bottom of the display list.

Answer 2

After you modify display array you just have to call scope.$apply() so that it runs the $digest cycle and updates the view. Also you need the initialize scope.var either in your controller or the directive and modify it conditionally.

I dont if this is what you want. I have modified the plunker take a look. http://plnkr.co/edit/J89VDMQGIXvFnK86JUxx?p=preview