angular UI Bootstrap pagination in asp.net mvc throws error TypeError: v13.itemsPerPage is not a function

Question

My ui.bootstrap.pagination is throwing an error when implemented: TypeError: v13.itemsPerPage is not a function.

I'm new to angular & javascript so any help is greatly appreciated.
Using

asp.net mvc 4.0.30319

Angular: 1.7.9

angular-ui-bootstrap 2.5.0

View:

    <div ng-controller="someController">
        <div class="divTable blueTable">
            <div class="divTableHeading">
                <div class="divTableRow">
                    <div class="divTableCell">Date</div>
                    <div class="divTableCell">Amount</div>
                    <div class="divTableCell">Machine</div>
                    <div class="divTableCell">Player ID</div>
                    <div class="divTableCell">First Name</div>
                    <div class="divTableCell">Last Name</div>
                    <div class="divTableCell">Address</div>
                    <div class="divTableCell">City</div>
                    <div class="divTableCell">State</div>
                    <div class="divTableCell">Zip</div>
                </div>
            </div>
            <div class="divTableBody">
                <div class="divTableRow" ng-repeat="jackpot in jackpots | limitTo: itemsPerPage(currentPage -1) * itemsPerPage    ">
                    <div class="divTableCell">{{jackpot.Date | date:'MM/dd/yyyy' }}</div>
                    <div class="divTableCell">{{jackpot.Amount | currency }}</div>
                    <div class="divTableCell">{{jackpot.Machine}}</div>
                    <div class="divTableCell">{{jackpot.PlayerID }}</div>
                    <div class="divTableCell">{{jackpot.FirstName }}</div>
                    <div class="divTableCell">{{jackpot.LastName }}</div>
                    <div class="divTableCell">{{jackpot.Address }}</div>
                    <div class="divTableCell">{{jackpot.City }}</div>
                    <div class="divTableCell">{{jackpot.State }}</div>
                    <div class="divTableCell">{{jackpot.Zip }}</div>
                </div>
            </div>
    </div>
<ul uib-pagination total-items="jackpots.length" ng-model="currentPage" max-size="5"  
    items-per-page="itemsPerPage" boundary-links="true" force-ellipses="true"></ul>

Javascript:

var someApp = angular.module("ModuleX", ['ui.bootstrap']);
someApp.controller("someController", function ($scope, $http) {
    $scope.currentPage = 1;
    $scope.itemsPerPage = 2;
        $http.get('http://localhost/services/webServices.asmx/getJackpots')
        .then(function (response) {
            $scope.jackpots = response.data;
        });
});

Any help is greatly appreciated - thanks in advance!

Answer 1

Take a look at this line:

limitTo: itemsPerPage(currentPage -1) * itemsPerPage  

You call itemsPerPage variable as a function. It looks like you forgot some operand.