Retrieve and show records in ion-list when user clicks "Next" or "Previous" buttons


I have to show more than 2000 records, 100 records at a time. I am retrieving records using $http.get. I want to update “ion-list” so that the next or previous 100 records are retrieved and shown when user clicks “Previous Page” and “Next Page” links

I do not want to use infinite scroll as it will slowly load 2000+ records, 200 at a time and app may get slow.

Kindly help with solution.



<ion-view title="{{cPrompts.title}}">
        <form name="appSearchForm" novalidate="">
        <ion-header-bar class="bar bar-subheader item-input-inset">
        <div class="item-input-wrapper">
            <input id="searchKey" type="search" placeholder="{{cPrompts.placeholder}}" ng-model="search.App" autocorrect="off" name="searchApp" ng-minlength="4">
            <button class="button button-clear" ng-click="clearSearch()">X</button>
        <button class="button button-energized" ng-click="searchJ()">Search</button>
          <div class='item item-divider item-text-wrap' ng-show="cUpdates.length >= 1">Found {{cUpdates.length}} judgement(s) with '{{search.App}}' {{cPrompts.foundText}}</div>
          <div class='item item-divider item-text-wrap' ng-show="cUpdates.length == 0">No judgement(s)  with '{{search.App}}' {{cPrompts.notFoundText}}</div>
        <a class="button icon-left ion-chevron-left button-clear button-dark">Previous page</a>
        <a class="button icon-right ion-chevron-right button-clear button-dark">Next page</a>

            <ion-item class="item-icon-right" style= "cursor:pointer" ng-repeat="cUpdate in cUpdates" ui-sref='app.message({cUpdateId:})'>
            <div class="left-BorderY">
            <h2>{{cUpdate.appelant}} <span style="color: grey;">vs</span><br>{{cUpdate.respondent}}</h2>
            <i class="icon ion-chevron-right icon-accessory energized" style="color:#EF473A !important; font-size: 26px;"></i>

– controller ----

.controller('cUpdatesCtrl', function($scope, $http,$state, $stateParams, $ionicLoading,cUpdatesService,sysConfig, uConfig, updateService, companyInfo) {

  $ = {
    Typ: 'res',
    App: null,
    PageNo: 0,
    typ: sType,
  $scope.searchJ = function() {
        template: 'Getting judgements ...<br><br><ion-spinner icon="android"></ion-spinner>',
        hideOnStageChange: true,
        duration: 60000,
    $scope.cUpdates = {};    
        $scope.cUpdates = cUpdates[0].judDetails;

  $scope.clearSearch = function() {
      $ = null;
      $scope.cUpdates = {};

.factory('updateService', function($http,sysConfig, uConfig) {
    var updates = [];

    return {
    getJudgements: function(s,typ,pageno){
            return $http.get(sysConfig.apiUrl + "judgementsAPI.php", { params: { "s": s, "typ": typ, "pageno": pageno} }).then(function(response){
                updates =;
                return updates;