Angularjs ui bootstrap - 不知道如何使用分页循环表数据

Question

我目前有一个包含可点击数据的页面。单击时，会出现一个模式，其中包含一个使用从服务接收的客户数据构建的表。我已经包含了Angularjs ui boostrap插件并实现了分页指令。我的分页工作是因为链接能够来回切换以及上一个和下一个按钮。我不知道该怎么做是循环显示控制器中指定数量的表数据。代码如下：

向下钻取指令：

var drilldownDirective = function () {
    return {
        restrict: 'E',
        scope: {
            tableData: '='
        },
        controller: function ($rootScope, $scope, DashboardFactory) {
            var tableData = $scope.tableData;
            var dashboardreportid = tableData.dashboardreportid;
            var companyid = tableData.companyid;
            var companybrandid = tableData.companybrandid;
            var startdate = tableData.startdate;
            var enddate = tableData.enddate;
            var clientdb = tableData.clientdb;
            var calltype = tableData.calltype;
            var secondarycallval = tableData.secondarycallval;

            var onSuccess = function (response) {
                var d, t, dt, dtobj, obj;
                var dtData = [];
                $scope.repdata = [];
                $scope.titles = [];

                for (d in response.repdata) {
                    var dtArray = [];

                    obj = response.repdata[d];
                    $scope.repdata.push(obj);

                    //Create data packages for dataTables
                    for (dt in obj.data) {
                        dtobj = obj.data[dt];
                        dtArray.push(dtobj);
                    };

                    //Push data package to dtData array for injecting in dataTable
                    dtData.push(dtArray);

                    //Dynamically save field name for table headers
                    if (obj.ID == 0) {
                        var tlt = obj.data;

                        for (t in tlt) {
                            $scope.titles.push(t);
                        };

                        $scope.titles.sort();
                    };
                };

                //Pagination controls
                $scope.totalItems = $scope.repdata.length;
                $scope.currentPage = 1;
                $scope.maxSize = 5;

                $scope.setPage = function (pageNo) {
                    $scope.currentPage = pageNo;
                };

                $scope.pageChanged = function() {
                    console.log('Page changed to: ' + $scope.currentPage);
                };

                $scope.bigTotalItems = 175;
                $scope.bigCurrentPage = 1;
            };

            var onError = function (response) {
                console.log("error");
                console.log(data);
            };

            DashboardFactory.getDashboardReportData(dashboardreportid, companyid, companybrandid, startdate, enddate, clientdb, calltype, secondarycallval).then(onSuccess, onError);

        },
        templateUrl: "dashboard/drilldownTable.html",
    }
}

（指令模板）drilldownTable.html

<input type='text' data-ng-model='searchbox' placeholder='search rows'></input>
<div class="table-responsive">
    <table id="drilldownTable" class="table table-bordered table-condensed">
        <thead>
            <th data-ng-repeat="title in titles">{{title}}</th>
        </thead>
        <tbody>
<!--            <tr data-ng-repeat='rd in repdata | filter:searchbox | limitTo:50'> -->
            <tr data-ng-repeat='rd in repdata | filter:searchbox | limitTo:bigTotalItems'>
                <td data-ng-repeat='val in rd.data track by $index'>{{val}}</td>
            </tr>
        </tbody>
    </table>
</div>
<pagination total-items="totalItems" data-ng-model="currentPage" data-ng-change="pageChanged()"></pagination>
<pre>Page: {{currentPage}} / {{maxSize}}</pre>

感谢所有帮助。感谢。