title: infinite scroll from remote server with angular
body: <p>I am working on an ionic angular project. There's a section where I'm implementing infinite scroll, and when I scroll to the bottom I see the data  showing up. </p>
  
  <p>What I've realized is the data somehow pre-populates and hides, waiting to come up when the user reaches the bottom of the page. Because no call is made to the server to load the other feeds, I'm displaying 5 records at a time.</p>
  
  <p>From the php script, I've converted to a json. I have 60 rows, and from the chrome console I read the json length to be 60, meaning all the 60 rows are loaded up were the data is pre-populated already.</p>
  
  <p>Is there a way I can show 5 records at a time and then when the user scrolls to the bottom it passes the last id, so a call would be made to the server to load the feeds?</p>
  
  <p>JS:</p>
  
  <pre><code>.controller('feedsctrl',['$scope','$http',function($scope,$http){
  $http.get('http://usefulsite.com/app/feeds.php').success(function(data){
         $scope.feeds= console.log(data); ;
         $scope.feeds=data;
  
         $scope.numberOfItemsToDisplay = 5; // Use it with limit to in ng-repeat
  $scope.addMoreItem = function(done) {
      if ($scope.feeds.length &gt; $scope.numberOfItemsToDisplay)
          $scope.numberOfItemsToDisplay += 5; // load number of more items
          $scope.$broadcast('scroll.infiniteScrollComplete')
  });   
  </code></pre>
  
  <p>php</p>
  
  <pre><code>SELECT * FROM users order by fname asc
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ion-content overflow-scroll="false" has-bouncing="true"&gt;
  
          &lt;div ng-controller="feedsctrl" class="list card has-subheader" ng-repeat="item in feeds | filter:scheduleSearch | limitTo:numberOfItemsToDisplay"&gt;
  
              &lt;div class="item item-avatar"&gt;
                  &lt;img src="http://usefulsite.com/resize_image/images.php?image={{item.profile_pix}}&amp;new_width=100&amp;new_height=100"&gt;
                  &lt;h2&gt;&lt;a class="names" href="#/tab/source/{{item.profile_id}}"&gt;{{item.fname}}&amp;nbsp;{{item.lname}}&lt;/a&gt;&lt;/h2&gt;
                  &lt;p&gt;November 05, 1955&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="item item-body"&gt;
                  &lt;img class="full-image" src="http://usefulsite.com/aoo/resize_image/images.php?image={{item.pic}}&amp;new_width=800&amp;new_height=800"&gt;
  &lt;p&gt;{{item.fname}} {{item.lname}}&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
  
          &lt;ion-infinite-scroll
  
                  on-infinite="addMoreItem()"
                  distance="1%"
                  ng-if="feeds.length &gt; numberOfItemsToDisplay"&gt;
          &lt;/ion-infinite-scroll&gt;
  </code></pre>