$http data, TypeError: Cannot call method slice of undefined

Question

I've built a table with a filter, sorting, limit and pagination system. With normal array of objects from the javascript works as expected.

My problem comes when I try to retrieve data from the server and to use it with my client-side pagination and filter. When the page is load for a few seconds the $scope.data is undefined until $http is resolved. I don't know how to solve it and I hope you can help me.

This is the pagination filter which I think is initialized before $http is resolve.

.filter('pagination', function () {
    return function (inputArray, currentPage, pageSize) {
        var start = (currentPage - 1) * pageSize;
        return inputArray.slice(start, start + pageSize);
    };
})

I will leave a fiddle here of my problem so you can see it there better.

Fiddle

Answer 1

I don't know if I should edit my post or I do it correctly posting an answer but I came up with a solution and I want to share it.

My problem was that the $scope.data (request from the server) was undefined when controller was initialized so what I did is to set up a route and wait for the promise to resolve before initializing the controller.

One problem I came up with is the fact that it's not possible to inject a .factory directly into the .config so I had to inject $provide to my .config and provide it with my service.

This is the a part of the code I'm talking about :

.config(['$routeProvider','$provide', function($routeProvider, $provide) {
    $provide.factory('select', ['$http','$q', function($http, $q) {
        return {
            getItems : function () {

                var deferred = $q.defer();

                $http.get('php/select_diarios.php', {cache : true}).success(function (data) {
                    //Passing data to deferred's resolve function on successful completion
                    deferred.resolve(data);
                }).error(function () {
                        //Sending an error message in case of failure
                        deferred.reject("An error occured while fetching items");
                    });
                //Returning the promise object
                return deferred.promise;
            }
        }
    }]);

    $routeProvider
        .when('/', {
            templateUrl: 'modulos/home/home.html',
            controller: 'AppController',
            resolve: {
                **data**: function (select) {
                    return select.getItems();
                }
            }
        }).
        when('/genericos', {
            controller: 'genericosController'
        })
        .otherwise({ redirectTo: '/' });
}])

Finally I only had to inject the data parameter of the resolve into my controller like so:

.controller('AppController', ['$scope', '$location','filterFilter','**data**', function ($scope, $location, searchFilter, **data**)
... more code
}]);

Also because of the otherwise redirect you must set a <a href="#/></a> in the pagination cause if not, each time you click to switch a page it doesn't know where to go and redirects to the first one and never changes the page.

this is how the pagination look like.

    <ul class="pagination pull-right">
        <li><a href="#">&laquo;</a></li>
        <li ng-repeat="n in range" ng-class="{active: n === (currentPage -1)}" ng-click="setPage(n+1)"><a href="#/">{{n+1}}</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>