qazimobeen

  $scope.originalItems = [];

  $scope.pageSizeOptions = [
      { count: '10', value: '10' },
      { count: '20', value: '20'},
      { count: '50', value: '50' } 
  ];

  $scope.pageSize = $scope.pageSizeOptions[1]; // default page size as per AC

qazimobeen

$scope.pageNoChanged = function (value) {
    // evaluates what is your current situation and can page no be changed?
    if ($scope.currentPage === 1 && value < -1) {
        //console.log("you can't request page change");
        // if you are on FIRST page and requested FIRST page
        return;
    }
    else if ($scope.currentPage === $scope.lastPage && value > 1) {
        //console.log("you can't request page change");
        // if you are on LAST page and requested LAST page

qazimobeen

$scope.pageSizeChanged = function () {
  var begin = 0; // if you change page size anytime it always starts from begining
  var end =  parseInt($scope.pageSize.value);

  $scope.currentPage = 1; // reset current page from the start
  $scope.lastPage = parseInt(Math.ceil($scope.originalItems.length / $scope.pageSize.value)); // re-calculates the last page
  $scope.items = $scope.originalItems.slice(begin, end);
};

qazimobeen

<div class="tablenav">
    <span class="displaying-num">
        Records per page
        <select name="recordsPerPage" ng-model="pageSize" ng-options="page.value for page in pageSizeOptions" ng-change="pageSizeChanged()">
        </select>
    </span>
    <div class="tablenav-pages">
        <span class="pagination-links">
            <span>{{engagementItems.length}} items </span>
            <a class="first-page" ng-click="pageNoChanged(-2)"><span>«</span></a>