Optimizing large list View in Ionic App

Question

I Am trying to fetch data from http, json array and display in list view and there is over 1000 items and loading all of them at once makes scrolling so laggy and am trying to load 20 items first and when scrolled down i want to load more 20 items but my code is not working. Can anyone help me out.

HTML

 <ion-content ng-controller="ListController" on-infinite-scroll="addMoreItem"     class="has-subheader" scroll-watch >
      <ion-list >
        <ion-item href="{{ item.url }}.jpg" ng-repeat="item in id | limitTo:numberOfItemsToDisplay" class="item-thumbnail-left item-text-wrap" >
          <img src="{{ item.thumbnailUrl }}.jpg" alt="Photo">
          <h2>
            {{item.id}}
          </h2>
          <p>{{item.title}}</p>
        </ion-item>
      </ion-list>
  </ion-content>

AngularJS

 .controller('ListController',['$scope','$http',function($scope,$http){
     $http.get('http://jsonplaceholder.typicode.com/photos').success(function(data){     
    $scope.id = data;
   })
     $scope.numberOfItemsToDisplay = 20; // number of item to load each time 
     $scope.addMoreItem = function(done) {
     if ($scope.item.length >= $scope.numberOfItemsToDisplay)
     $scope.numberOfItemsToDisplay += 20; // load 20 more items
      done(); // need to call this when finish loading more data
   }
   }])

Answer 1

I suggest solving it through infinite-scroll.. :)