My angular filter is running 3 times then returns nothing

Question

My filter runs 3 times, the first execution gives the results the I want, but it runs again 2 times returning nothing. My question is why it is calling the filter again 2 times?

This is my code to my filter

.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 {
            var results = $filter("limitTo")(data.splice(start_index), size);
            console.log(results);
            return results;
        }
    } else {
        return data;
    }
}});

this is how I apply my filter to my view

<tr ng-repeat="product in products | range:selectedPage:pageSize" ng-click="productClicked(product)">
        <td>{{product.prod_name}}</td>
        <td>{{product.company}}</td>
</tr>

The report from my console is like this
[Object, Object, Object, Object, Object]
[]
[]

Answer 1

You have a bug there - in the filter you're doing data.splice(start_index) - this changes the product array itself and ends up with your data being completely removed from the array...

Change it to data.slice(start_index) and everything should work.

By the way, beware of doing paging via ngRepeat+filters - if your array becomes large, you will have performance issues.