Q:

angularjs ng-repeat with filter return empty array on second time

On the learning process of angularjs I just created a table with pagination. Here is the code
HTML
 <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>NAME</th>
          <th>EMAIL</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="user in data | range:selectedPage:pageSize">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.email}}</td>
        </tr>
      </tbody>
    </table>
    <div class="pull-right btn-group">
      <a ng-repeat="page in data | filter:pageCount:pageSize" ng-click="selectPage($index + 1)" class="btn btn-default" ng-class="getPageClass($index + 1)">
    {{$index + 1}}
    </a>
    </div>
  </div>

JS
var exampleTable = angular.module('exampleTable', []);
exampleTable.controller('exampleTableCont', function($scope) {
  $scope.data = [{
    "id": 1,
    "name": "john",
    "email": "john@john.com"
  }, {
    "id": 3,
    "name": "william",
    "email": "william@test.com"
  }, {
    "id": 2,
    "name": "clark",
    "email": "clark@test.com"
  }, {
    "id": 5,
    "name": "Brian",
    "email": "Brian@Brian.com"
  }, {
    "id": 4,
    "name": "smith",
    "email": "smith@smith.com"
  }, {
    "id": 6,
    "name": "chris",
    "email": "chris@test.com"
  }, {
    "id": 7,
    "name": "june",
    "email": "june@june.com"
  }];
  $scope.selectedPage = 1;
  $scope.pageSize = 3;
  $scope.selectPage = function(newPage) {
    $scope.selectedPage = newPage;
  }
  $scope.getPageClass = function(page) {
    return $scope.selectedPage == page ? "btn-primary" : "";
  }
});

exampleTable.filter("pageCount", function() {
  return function(data, size) {
    if (angular.isArray(data)) {
      var result = [];
      for (var i = 0; i < Math.ceil(data.length / size); i++) {
        result.push(i);
      }
      console.log(result);
      return result;
    } else {
      return data;
    }
  }
});
exampleTable.filter("range", function($filter) {
  return function(data, page, size) {
    if (angular.isArray(data) && angular.isNumber(page) && angular.isNumber(size)) {
      var start_index = (page - 1) * size;
      if (data.length < start_index) {
        return [];
      } else {
        console.log($filter("limitTo")(data.splice(start_index), size));
        return $filter("limitTo")(data.splice(start_index), size);
      }
    } else {
      return data;
    }
  }
});

Here is the plunker
I tried to console the range filter, while doing so I see it run two times.
First time with the 3 row of data and second time an empty array. Since it is returning empty array table is not drawn. 
May I know why does it return empty array instead of the 3 array. How to overcome this?
pageCount filter also not working as expected but here the pageCount filter not even run for a single time. 

A:

I found the bug. I was using splice method which work directly on the source arrays itself.
Though the filter won't affect the $scope.data but it will affect the directive data. Since the filter is running multiple time it is removing the data again and again resulting to empty array. Hence the table is not drawn.
$filter("limitTo")(data.splice(start_index), size);

TO
$filter("limitTo")(data.slice(start_index), size);

Here is the updated plunker

