ng-repeat pagination looses items

Question

I'm learning AngularJS following the good Pro AngularJS written by Adam Freeman.

I'm stuck on ng-repeat pagination using filters. I know there are bootstrap ui directives for Angular, but i'm following this book in order to learn how angular works.

My code:

 <section class="row-fluid" ng-controller="GetAjax">
    <div class="col-md-12">
        <h2>Repater Caricato in Ajax</h2>
    </div>
    <div class="row-fluid">
        <div class="col-md-6" style="max-height: 350px; overflow-y: auto" ng-controller="PagedData">
            <ul class="list-group">
                <li  class="list-group-item" ng-repeat="item in data.visitors | filter:query |  range:selectedPage:pageSize">
                    <b>{{item.id}}.</b> {{item.first_name}} {{item.last_name}} | <small><i>{{item.email}} - {{item.country}} {{item.ip_address}}</i></small>
                </li>
            </ul>

            <ul class="pagination">
                <li ng-repeat="page in data.visitors | pageCount:pageSize"
                    ng-click="selectPage($index + 1)"
                    ng-class="pagerClass($index + 1)">
                    <a>{{$index + 1}}</a>
                </li>
            </ul>
        </div>           
    </div>
</section>

Angular filters

angular.module("customFilters")

/******* Filters per la paginazione dei dati ******************/
//Genera il range di dati in base alla page size
.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;
            console.log(data.length);

            if (data.length < start_index) {
                return [];
            } else {
                return $filter("limitTo")(data.splice(start_index), size);
            }
        } else {
            return data;
        }
    }
})
//Calcola il numero di pagine
.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);
            }
            return result;
        }
        else
        {
            return data;
        }
    }
});

Angular Controller

 .controller("GetAjax", function($scope, $http){
    $http.get('data/visitors.json').success(function(data) {
        $scope.data = {visitors : data};
    });
})
.constant("activeClass", "active")
.constant("perPage", 30)
.controller("PagedData", function($scope, $filter, activeClass, perPage){  

    $scope.selectedPage = 1;
    $scope.pageSize = perPage;

    console.log("page"+ $scope.selectedPage);

    $scope.selectPage = function (newIndex) {
        $scope.selectedPage = newIndex;
        console.log( {idx: newIndex});
    }

    $scope.pagerClass = function (index) {
        return (index == $scope.selectedPage) ? activeClass : "";
    }
});

The result is that after 3 range filter invocations during the page render, the data array looses all the data. Strange is that using the example from the book this code works perfectly.

Please, help me to know my error :D

Answer 1

splice function overwrites array

if you have an array

    a = [1,2,3,4];
    a.splice(2,1);
    // a = [1,2,4]

results is a = [1,2,4]

use slice instead