Onsenui infinit scroll + AngularJS ngShow

Question

Im trying to show a loading block when the infinite scroll is loading more list items, and its ok for the first time, but the followings does'nt work. When "$scope.isLoading = true;" the block is not visible.

HTML

<ons-scroller infinit-scroll-enable="true" on-scrolled="getNextItems()" threshold="20" style="height:100%">
    <ons-list-item  ng-repeat="i in items" modifier="tappable chevron">{{i.name}}</ons-list-item>

    <ons-list-item ng-show="isLoading"> LOADING </ons-list-item>

</ons-scroller>

JAVASCRIPT

  $scope.getNextItems = function(){
    if($scope.isLoading) return;
    $scope.isLoading = true;
      setTimeout(function(){
          $scope.$apply(function(){
              addItems($scope.items);
              $scope.isLoading = false;
          });
      },3000);
  };

Here is the fiddle with the problem.

http://jsfiddle.net/mh6roxsk/

I tried different ways to do this, but always the same result.

Thanks in advance!!

---

As @rohan answers the problem is solved with $timeout and the behavior that i want is like this:

http://jsfiddle.net/hasukronos/mh6roxsk/1/

But i forgot to mention that the real problem happens with WebSQL api callback that have the same problem as native setTimeout.

Answer 1

It seems like the onsen-ui library doesn't call the method provided by you in on-scrolled inside with an $apply block, but it is called the first time during the initial render of your document, that's why it works the first time.

So angular is informed the first time about your variables changing but never after that.

$scope.getNextItems = function(){
  if($scope.isLoading) return;

   $timeout(function(){
       addItems($scope.items);
       $scope.isLoading = false;
   },3000);

   $timeout(function() {
     $scope.isLoading = true;  
   });
};

Two changes have been made to your code.

1. setTimeout has been changed to $timeout, most importantly by default $timeout executes your code in an $apply block.

2. The second $timeout is for notifying angular that $scope variables are changing, normally you shouldn't have to do this(the library should do this). The reason is that it's wrapped in a $timeout call is because the first time getNextItems is called manually and calling $apply during an digest cycle spawns an error.