AngularJS - 分页不适用于bootstrap数据表

Question

我正在使用AngularJS bootstrap数据表并且对此非常新。

这是我的代码

controller.js

.controller('tableContactCtrl', function($timeout, $scope, $filter, $sce, ngTableParams, tableService) {
        //var data = tableService.data;

        var selfContact = this; 
        $scope.data = [];
        var promise = tableService.getContactData();

        promise.then(
            function(payload) { 

                $scope.data = payload.data;

                selfContact.tableEdit = new ngTableParams({
                    page: 1,            // show first page
                    count: 10,           // count per page  
                    sorting: {
                        name: 'asc'     // initial sorting
                    }                   
                }, {
                    total: $scope.data.length, // length of data
                    getData: function($defer, params) {
                        //$defer.resolve(selfContact.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));

                        //sorting                       
                        var orderedData = params.sorting() ? $filter('orderBy')($scope.data, params.orderBy()) : $scope.data;

                        //filtering
                        var orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;

                        //orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

                        params.total(orderedData.length);
                        //$defer.resolve(orderedData);
                        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));

                    }
                });                 
            },
            function(errorPayload) {
              $log.error('failure loading movie', errorPayload);
            }); 

        //to update data    
        selfContact.updateContact = function(w) {
            tableService.updateContactData(w);
        }   

        selfContact.removeContact = function(id, contact_id) {
            //alert(id)
            $timeout(function () {
                $scope.data.splice(id, 1);
            })
            //tableService.removeContactData(contact_id) 
        }           
    })  

view.html

<div class="container" data-ng-controller="tableContactCtrl as tctrl">
  <table ng-table="tctrl.tableEdit" class="table table-striped table-vmiddle" show-filter="true">
    <tr ng-repeat="w in data"  ng-class="{ 'active': w.$edit }">
       <td>...</td>
       <td data-title="'Actions'">
          <button type="button" class="btn btn-default" ng-if="!w.$edit" ng-click="tctrl.removeContact($index, w.contact_id)"><i class="zmdi zmdi-close"></i></button>
       </td>
    </tr>
  </table>
</div>

我在DB中有5000条记录，因此我需要在数据表中进行分页。当我使用＆＃39;这个＆＃39;控制器中的变量而不是$ scope变量，分页工作正常，但我无法获得$ scope的问题。当我使用$ scope变量时，它会将所有数据加载到一个页面中，因此它也花费了很多时间，并且当然在一页中加载所有记录并不方便。有人可以帮帮我吗？

已更新

controller.js

$scope.tableEdit = new ngTableParams({
    page: 1,            // show first page
    count: 10,           // count per page  
    sorting: {
        name: 'asc'     // initial sorting
    }                   
}

view.html

<div class="container" data-ng-controller="tableContactCtrl as tctrl">
    <table ng-table="tableEdit" class="table table-striped table-vmiddle" show-filter="true">
    ...
    </table>
</div>