php - Angularjs - Loading $http response item Less than 5 at a time -

i'm working on product catalog application using ionic framework, php retrieve product database , ajax load in frontend, every thing working great, when try filter category response return json more 1xxx items inside , hurt user experience.

code ->

controllers->

    $scope.$on('$statechangesuccess', function() {     $scope.loadmore();  //added infine scroll });  // loadmore() called inorder load list  $scope.loadmore = function() {      str=sharedfilterservice.geturl();     $http.get(str).success(function (response){         window.localstorage.setitem( 'app-name', json.stringify(response));         var appdata = json.parse( window.localstorage.getitem( 'app-name' ));         $scope.menu_items = appdata;         $scope.hasmore=response.has_more;   //"has_more": 0 or number of items left         $scope.$broadcast('scroll.infinitescrollcomplete');     });   }; 

services ->

 .factory('sharedfilterservice', [function(){  var obj = {}; obj.str = "http://pathtoscript.php";    obj.geturl=function(){      obj.str="http://pathtoscript.php"; // pass value url     console.log("url",obj.str);     return obj.str; }; return obj; }]) 

ionic html

 <ion-list ng-repeat="item in menu_items">         <ion-item class="item-thumbnail-left" >         <ion-slide-box auto-play ="true" does-continue="true" show-pager="false"  >                 <ion-slide ng-repeat="image in item.image">                             <img  ng-src="{{image.url}}"  ng-click="showproductinfo(item.p_id,item.p_description,image.url,item.p_name,item.p_price)" >                 </ion-slide >         </ion-slide-box>             <p style="position:absolute;right:10px;">             <a  ng-click="addtocart(item.p_id,item.p_image_id,item.p_name,item.p_price)" class="button  button-balanced button-clear   icon ion-android-cart">  </a>              </p>              <h2  ng-click="showproductinfo(item.p_id,item.p_description,item.p_image_id,item.p_name,item.p_price)" > {{item.p_name}} </h2>             <p   ng-click="showproductinfo(item.p_id,item.p_description,item.p_image_id,item.p_name,item.p_price)">price: {{item.p_price}}</p>         </ion-item>      </ion-list> 

my question can load number of item php script, , continue last position when needed.

i found solution, after @vohidjon suggestion have modified end code using get["till"] number of item load

this new controller

    $scope.loadmore = function() {          str=sharedfilterservice.geturl();         $http.get(str).success(function (response){         $scope.menu_items = response;         });  }; $scope.loadmoreleft = function() {         sharedfilterservice.till+=3;         str=sharedfilterservice.geturl();         $http.get(str).success(function (response){         $scope.menu_items = response;         }); }; $scope.loadmoreright = function() {         sharedfilterservice.till-=3;         str=sharedfilterservice.geturl();         $http.get(str).success(function (response){         $scope.menu_items = response;         });  }; 

and services

    obj.geturl=function(){      obj.till=obj.till;     obj.str="http://pathtoscript.php?till="+obj.till; // pass value url -- ?till="+obj.till      if(obj.sort!="" && obj.category!=""){         obj.str= obj.str+"&category="+obj.category+"&sort="+obj.sort;     }     else if(obj.category!="" ){         obj.str= obj.str+"&category="+obj.category;     }     else if(obj.sort!=""){           obj.str= obj.str+"&sort="+obj.sort;     }     console.log("url",obj.str);     return obj.str; }; return obj; 

then added ahref tag handle click

        <div class="bottom-arrow">         <div class="left"><a href="#"  ng-click='loadmoreleft()'>left</a></div>         <div class="right"><a href="#"  ng-click='loadmoreright()'>right</a></div>     </div>