javascript - infinite scroll from remote server with angular

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.

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.

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.

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?

JS:

.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 > $scope.numberOfItemsToDisplay)
        $scope.numberOfItemsToDisplay += 5; // load number of more items
        $scope.$broadcast('scroll.infiniteScrollComplete')
});   
Copy code

php

SELECT * FROM users order by fname asc
Copy code

HTML

<ion-content overflow-scroll="false" has-bouncing="true">

    <div ng-controller="feedsctrl" ng-repeat="item in feeds | filter:scheduleSearch | limitTo:numberOfItemsToDisplay">

      <div >
        <img src="http://usefulsite.com/resize_image/images.php?image={{item.profile_pix}}&new_width=100&new_height=100">
        <h2><a href="#/tab/source/{{item.profile_id}}">{{item.fname}}&nbsp;{{item.lname}}</a></h2>
        <p>November 05, 1955</p>
      </div>

      <div >
        <img src="http://usefulsite.com/aoo/resize_image/images.php?image={{item.pic}}&new_width=800&new_height=800">
<p>{{item.fname}} {{item.lname}}</p>
      </div>

    </div>


    <ion-infinite-scroll

        on-infinite="addMoreItem()"
        distance="1%"
        ng-if="feeds.length > numberOfItemsToDisplay">
    </ion-infinite-scroll>
Copy code