Loading new datas to list

Hi. I have a page that shows records from database. Backend service return 20 records for every call. So, I show 20 records on page for first page open. I want that when user comes to bottom of the page, other 20 records loads after presenting data.(also first 20 records will remain on page). How can I do this? I try “ion-infinite-scroll”. But I can not achieve. Maybe, I made a wrong a code.
Can anyone give me a idea?
Thanks in advance.

yeah … so basicly you have an scope var … lets say

$scope.myRecords

This scope var is bound to the view and is an array with json records … let’s say you have an ion repeat bound to the scope var

    <ion-list >
        <ion-item ng-repeat="record in myRecords">
            {{record.title}}
        </ion-item>
    </ion-list>

Now you can create a button … let say labeled “get more” … When you click on it, it will get 20 new records . Now loop through each items in the new result and add each record to the scope var … for example

$scope.myRecords.push(theNewJsonRecord);