Client Side Pagination using Angular js                                  

In controller we are assigning the json data to datalist

Note: $scope.curPage and $scope.pageSize

 
angular.module('sampleproject').controller( 'SampleController',
function ($rootScope, $scope ,samplefactoryService )
{
// pagination
 $scope.curPage = 0;
 $scope.pageSize = 5;
$scope.onSample = function()
{
 samplefactoryService.myServicefunction( $scope.list ,
 function(data)
 {
 $scope.datalists = data ;// response from service
 },
 function( data)
 {
  //error
 });
};
$scope.numberOfPages = function() 
 {
 return Math.ceil($scope.datalists.length / $scope.pageSize);
 };
});
 

HTML ( View )

 
<ul>
 <li ng-repeat="datalist in datalists | 
 pagination: curPage * pageSize | limitTo: pageSize" >
 <div>{{ datalist.name }}</div> // your content
 </li>
</ul> 

Pagination div

 
<--Pagination div --->
<div class="pagination-div" ng-show="datalists.length">
<ul>
 <li>
  <button type="button" ng-disabled="curPage == 0"
 ng-click="curPage=curPage-1">PREV</button>
 </li>
 <li>
 <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span>
 </li>
 <li>
 <button type="button"
 ng-disabled="curPage >= datalists.length/pageSize - 1"
 ng-click="curPage = curPage+1">NEXT </button>
 </li>
</ul>
</div>
  
 

Directive

You can declare this in filter.js or controller itself .Better define this in directive .

 
angular.module('sampleproject').filter('pagination', function()
{
 return function(input, start)
 {
  start = +start;
  return input.slice(start);
 };
});
 
 

You can modify the style for better look and feel