Ionic framework infinite scroll just have called one time

I have tried to build mobile app with ionic framework in the recent day. And I found that the list directy of ionic is very slow when it has just about 30 items or more, it's very bad. I've tried the bindonce method in angularjs to reduce the number of watchers but it's not help much. So I tried to use the infinite scroll function that ionic has.

My template is like this:

<view title="'Pet Information'">
  <content has-header="true" has-tabs="true" on-infinite-scroll="loadMore">
    <list>
      <item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
        <h3>{{pet.title}}</h3>
        <p>{{pet.description}}</p>
        </item>
      </item>
    </list>
  </content>
</view>

And my controller

.controller('PetIndexCtrl', function($scope, PetService) {  
  $scope.pets_all = PetService.all();
  $scope.pets = [];
  // Add just 10 pets at the first time
  var count = 0;
  for (var i = 0; i < 10; i++) {
    $scope.pets.push($scope.pets_all[i]);
    count++;
  };

  $scope.loadMore = function() {    
    var curr_count = count;
      for (var i = curr_count; i < curr_count + 10; i++) {
        if (i < $scope.pets_all.length) {
          $scope.pets.push($scope.pets_all[i]);
          count++;
        } else {
          return;
        }   
      }
  }
})

My idea is that the list will just load 10 items at the first time, and everytime user scroll to bottom edge of the phone it will call the loadMore function that will load 10 more items. But it seem that the loadMore function just have called one time, so that all I have is just the list of 20 items while my array is more than 100 items.

Maybe I'm wrong or the infinite scroll of ionic framework have error?

I found what wrong with my code. I just missed the done callback in the code. I saw it in the example on github but I've just thought that it's a option not require, poor me :)

$scope.loadMore = function(done) {      
    $timeout(function(){
       var curr_count = count;
      for (var i = curr_count; i < curr_count + 7; i++) {
        if (i < $scope.pets_all.length) {
          $scope.pets.push($scope.pets_all[i]);
          count++;
        } else {
          return;
        }   
      }
      done();
    }, 1000);   
  }

Seems there is a new way to do this in Ionic 2. Now you have to broadcast an event in the loadMore callback, to signalize that loading is finished.

$scope.$broadcast('scroll.infiniteScrollComplete');