Ionic Infinite Scroll

<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title>Tabs Example</title>
  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">

  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MyController">
  
  <ion-view>
    <ion-content class="padding">
    
      <div class="row header-row">
        <div class="col col-center brd gray-20" ng-repeat="d in invoice_column_name | filter:{checked: true}"><sort-header label="{{d.label}}" index="{{d.index}}" sort-exp="setSort(idx, reverse)"></sort-header></div>
        <div class="col col-10 text-center brd gray-20">
          <button class="button-icon icon ion-gear-b" ng-click="openPopover($event)"></button>
        </div>
      </div>
      <div class="row" ng-repeat="column in invoice_records | orderBy: sortval:reverse | filter: query">
        <div class="col col-center brd collapse-sm" ng-repeat="field in column.columns" ng-show="data[$index].checked && data[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
        <div class="col col-10 text-center brd collapse-sm"></div>
      </div>
      <ion-infinite-scroll immediate-check="false" ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
    </ion-content>
  </ion-view>

<script id="my-column-name.html" type="text/ng-template">
  <ion-popover-view>
      <ion-header-bar>
          <h1 class="title">Show Columns</h1>
      </ion-header-bar>
      <ion-content>
          <ul class="list" ng-repeat="item in data">
              <li class="item item-checkbox">
                  <label class="checkbox">
                      <input type="checkbox" ng-model="item.checked">
                  </label>
                  {{item.label}}
              </li>
          </ul>
      </ion-content>
  </ion-popover-view>
</script>

<script id="sort-header.html" type="text/ng-template">
  <button class="button button-clear button-dark" ng-click="sortstring({idx:idx, reverse:reverse});">
    <i class="icon" ng-class="{'ion-arrow-down-b': reverse, 'ion-arrow-up-b': !reverse}"></i>  <strong>{{label}}</strong>
  </button>
</script>
  
</body>

</html>

angular.module('ionicApp', ['ionic'])
.controller('MyController', function($scope, $filter, $ionicPopover,ser,$ionicLoading,$timeout) {
  var showitems = 50;
  var counter = showitems;
  $scope.invoice_column_name=[]; // show colo
  $scope.invoice_records=[]; // show colo
  $scope.data=[];
  $scope.MAX_SHOW=2;  // maximum
  callServiceForLocalData();
  showLoader();
  function callServiceForLocalData(){
    ser.callInvoiceServiceLocal(function(data){
      ShowViewAfterSuccess(data);
      
      },function(data){
        console.log("error on callInvoiceServiceLocal");
        //console.log(data);
    });   
  }
  $scope.hide = function() {
     $ionicLoading.hide();
  };
  
  function showLoader(){
    $ionicLoading.show({template: '<ion-spinner icon="ios"></ion-spinner><div>loading</div>'});
  }
  
  function ShowViewAfterSuccess(data){
    
    $timeout(function(){
      $scope.hide();
    },0);
    $scope.data=data.columns;
    $scope.total_invoice_records=data.records;
    $scope.invoice_records = $scope.total_invoice_records.slice(0, showitems);
    $scope.data = $scope.data.filter(function (element) {
      return !element.hidden;
    });
    for(var i = 0; i < $scope.data.length; ++i) {
      $scope.data[i].checked = i <= $scope.MAX_SHOW;
    }
    $scope.invoice_column_name=$scope.data;
  }
  
  $scope.noMoreItemsAvailable = false;
  $scope.loadMore = function() {
    var next = $scope.total_invoice_records.slice(counter, counter+showitems);
    $scope.invoice_records = $scope.invoice_records.concat(next);
    counter = counter+showitems;
    if (counter>=$scope.total_invoice_records.length) {
      $scope.noMoreItemsAvailable = true;
    }
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };
})
.directive('sortHeader', function($timeout) {
  return {
    restrict: 'E',
    scope: {
      'label': '@',
      'sortstring': '&sortExp',
      'idx': '@index'
    },
    templateUrl: 'sort-header.html',
    link: function(scope, element, attrs) {
      scope.reverse = false;
      element.on('click', function(){
        $timeout(function(){
          scope.reverse = !scope.reverse;
        });
      });
    }
  };
}).factory('ser', ['$http', '$q', function($http, $q) {
    return {
        callInvoiceServiceLocal: function (successcallback, errorcallback) {
            return $http.get('https://dl.dropboxusercontent.com/s/3v7ya481187k8gf/a.json?dl=0').success(successcallback).error(errorcallback);
        }
    }
}]);

/* Styles go here */

Answer for stackoverflow [question](http://stackoverflow.com/questions/30670705/how-to-show-only-25-element-at-one-time/30673220#30673220)