Angular Pagination and Search

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    
    <link rel="stylesheet" href="/bower_components/foundation/css/foundation.css" />
    
</head>
<body ng-app="testApp">

{{ card.name }} [{{ card.id }}]

<div>Issuer: {{ card.issuer_id }}</div>

<span>Starting on {{ card.start_time }}</span>
        <span>Ending on {{ card.end_time }}</span>

<button ng-click="remove($index)">Event</button>
        <button ng-click="something()">Event</button>

</li>
</ul>

</div>

<script src="/bower_components/modernizr/modernizr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/bower_components/jquery.cookie/jquery.cookie.js"></script>
<script src="/bower_components/jquery-placeholder/jquery.placeholder.js"></script>
<script src="/bower_components/foundation/js/foundation.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/ngInfiniteScroll/ng-infinite-scroll.js"></script>

angular.module('pagination', [])

.filter('paginate', function(Paginator) {
        return function(input, rowsPerPage) {
            if (!input) {
                return input;
            }

if (rowsPerPage) {
                Paginator.rowsPerPage = rowsPerPage;
            }

Paginator.itemCount = input.length;

return input.slice(parseInt(Paginator.page * Paginator.rowsPerPage), parseInt((Paginator.page + 1) * Paginator.rowsPerPage + 1) - 1);
        }
    })

.filter('forLoop', function() {
        return function(input, start, end) {
            input = new Array(end - start);
            for (var i = 0; start < end; start++, i++) {
                input[i] = start;
            }

return input;
        }
    })

.service('Paginator', function ($rootScope) {
        this.page = 0;
        this.rowsPerPage = 50;
        this.itemCount = 0;
        this.limitPerPage = 5;

this.setPage = function (page) {
            if (page > this.pageCount()) {
                return;
            }

this.page = page;
        };

this.nextPage = function () {
            if (this.isLastPage()) {
                return;
            }

this.page++;
        };

this.perviousPage = function () {
            if (this.isFirstPage()) {
                return;
            }

this.page--;
        };

this.firstPage = function () {
            this.page = 0;
        };

this.lastPage = function () {
            this.page = this.pageCount() - 1;
        };

this.isFirstPage = function () {
            return this.page == 0;
        };

this.isLastPage = function () {
            return this.page == this.pageCount() - 1;
        };

this.pageCount = function () {
            return Math.ceil(parseInt(this.itemCount) / parseInt(this.rowsPerPage));
        };

this.lowerLimit = function() {
            var pageCountLimitPerPageDiff = this.pageCount() - this.limitPerPage;

if (pageCountLimitPerPageDiff < 0) {
                return 0;
            }

if (this.page > pageCountLimitPerPageDiff + 1) {
                return pageCountLimitPerPageDiff;
            }

var low = this.page - (Math.ceil(this.limitPerPage/2) - 1);

return Math.max(low, 0);
        };
    })

.directive('paginator', function factory() {
        return {
            restrict:'E',
            controller: function ($scope, Paginator) {
                $scope.paginator = Paginator;
                $scope.$watch('search', function(term) {
                    $scope.paginator.setPage(0);
                });
            },
            templateUrl: '/paginationTemplate.html'
        };
    });

var module = angular.module('testApp', ['pagination']);

module.controller('Ctrl', function ($scope, $http, filterFilter) {

$scope.cards = [];
        $scope.filteredCards = [];
        $scope.rowsPerPage = 5;

$http({method: 'GET', url: '/card'}).
            success(function(data, status, headers, config) {
                $scope.cards = data;
                $scope.filteredCards = data;
                $scope.cache = angular.copy($scope.cards);
            }).
            error(function(data, status, headers, config) {
                $scope.cards = 'FAIL';
            });

$scope.$watch('search', function(term) {
            // Create $scope.filtered and then calculat $scope.noOfPages, no racing!
            $scope.filteredCards = filterFilter($scope.cards, term);
        });

$scope.remove = function(index) {
            $scope.cards.splice(index, 1);
        }

});
</script>

</body>
</html>