当配置选项来自service时，Angular中的控件会中断

我有一个服务，将返回我的一些配置选项的ng-grid。getGridOptions函数以使用它的控制器的名称为参数，并返回正确的选项集(为了简单起见，这里只显示了一个)。

ng-grid选项服务:

angular.module('services').service('GridOptionsService',function(){
    var documents = {
        data: 'myData',
        enablePaging: true,
        showFooter:true,
        totalServerItems: 'totalServerItems',
        pagingOptions: {
            pageSizes: [50,100,200],
            pageSize: 50,
            currentPage: 1
        },
        filterOptions:  {
            filterText: '',
            useExternalFilter: false
        },
        enableCellEdit: false,
        enableColumnReordering: true,
        enablePinning: false,
        showGroupPanel: false,
        groupsCollapsedByDefault: true,
        enableColumnResize: true,
        showSelectionCheckbox: true,
        selectWithCheckboxOnly: true,
        columnDefs: [
            {field:'docId', displayName:'Document ID', cellTemplate: NgGridDomUtil.toLink('#/documents/{{row.getProperty(col.field)}}')},
            {field:'docTags', displayName:'Tags'},
            {field:'lastSaveDate', displayName:'Last saved'},
            {field:'documentVersion', displayName:'Version', width: 120},
            {field:'busDocId', displayName:'Customer Doc ID'},
            {field:'markedForDelete', displayName:'Deleted', width: 120, cellTemplate: NgGridDomUtil.toCheckbox('{{row.getProperty(col.field)}}')}]
    };
    var gridOptionManager = {
        documents: documents
    }
    return {
        getGridOptions: function(controllerName){
            return gridOptionManager[controllerName];
        }
    }
})

NgGridDomUtil类只是让它更容易在网格上设置样式:

var NgGridDomUtil = (function(){
    var toLink = function(href){
    var html = '<div class="ngCellText" ng-class="col.colIndex()"><a ng-href= "'+href+'" class="ngCellLink"><span ng-cell-text>{{row.getProperty(col.field)}}</span></a></div>'
    return html;
}
var toCheckbox = function(_selected){
    var html = '<div class="ngCellText" ng-class="col.colIndex()"><input type="checkbox" ng-change="console.log('+"TEST"+')" ng-model="COL_FIELD"  ng-input="COL_FIELD"' + (_selected ? 'selected' : '') + ' /></div>'
    return html
}
return {
    toLink: toLink,
    toCheckbox: toCheckbox
}
})();

我的问题是，当我使用GridOptionsService检索数据时，数据仍然正确地呈现给网格，但文本过滤不再工作，分页被破坏。然而，selectedFilterOption仍然工作。

控制器:

angular.module('controllers').controller('Repository', ['$scope', 'DataContext','GridOptionsService','$http', function($scope, DataContext,GridOptionsService,$http) {
    $scope.filterOptions = {
        filterText: '',
        useExternalFilter: false
    };
    $scope.totalServerItems =0;
    $scope.pagingOptions ={
        pageSizes: [5,10,100],
        pageSize: 5,
        currentPage: 1
    }
    //filter!
    $scope.dropdownOptions = [{
        name: 'Show all'
    },{
        name: 'Show active'
    },{
        name: 'Show trash'
    }];
    //default choice for filtering is 'show active'
    $scope.selectedFilterOption = $scope.dropdownOptions[1];

    //three stage bool filter
    $scope.customFilter = function(data){
        var tempData = [];
        angular.forEach(data,function(item){
            if($scope.selectedFilterOption.name === 'Show all'){
                tempData.push(item);
            }
            else if($scope.selectedFilterOption.name ==='Show active' && !item.markedForDelete){
                tempData.push(item);
            }
            else if($scope.selectedFilterOption.name ==='Show trash' && item.markedForDelete){
                tempData.push(item);
            }
        });
        return tempData;
    }

    //grabbing data
    $scope.getPagedDataAsync = function(pageSize, page,  searchText){
        var data;
        if(searchText){
            var ft = searchText.toLowerCase();
            DataContext.getDocuments().success(function(largeLoad){
                //filter the data when searching
                data = $scope.customFilter(largeLoad).filter(function(item){
                    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                })
                $scope.setPagingData($scope.customFilter(data),page,pageSize);
            })
        }
        else{
            DataContext.getDocuments().success(function(largeLoad){
                var testLargeLoad = $scope.customFilter(largeLoad);
                //filter the data on initial page load when no search text has been entered
                $scope.setPagingData(testLargeLoad,page,pageSize);
            })
        }
    };
    //paging
    $scope.setPagingData = function(data, page, pageSize){
        var pagedData = data.slice((page -1) * pageSize, page * pageSize);
        //filter the data for paging
        $scope.myData = $scope.customFilter(pagedData);
        $scope.myData = pagedData;
        $scope.totalServerItems = data.length;
//        if(!$scope.$$phase){
//            $scope.$apply();
//        }
    }
    //watch for filter option change, set the data property of gridOptions to the newly filtered data
    $scope.$watch('selectedFilterOption',function(){
        var data = $scope.customFilter($scope.myData);
        $scope.myData = data;
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
        $scope.setPagingData($scope.myData,$scope.pagingOptions.currentPage,$scope.pagingOptions.pageSize);
    })
    $scope.$watch('pagingOptions',function(newVal, oldVal){
        $scope.getPagedDataAsync($scope.pagingOptions.pageSize,$scope.pagingOptions.currentPage,$scope.filterOptions.filterText);
        $scope.setPagingData($scope.myData,$scope.pagingOptions.currentPage,$scope.pagingOptions.pageSize);
    },true)

    $scope.message ="This is a message";
    $scope.gridOptions = {
        data: 'myData',
        enablePaging: true,
        showFooter:true,
        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions,
        enableCellEdit: true,
        enableColumnReordering: true,
        enablePinning: true,
        showGroupPanel: true,
        groupsCollapsedByDefault: true,
        enableColumnResize: true
    }
    $scope.gridOptions = GridOptionsService.getGridOptions('documents');
    //get the data on page load
    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
}]);

我硬编码到控制器中的网格选项与服务返回的网格选项相同。我不明白的是为什么网格呈现，下拉过滤器工作，但分页被打破，只有当网格的选项来自一个服务?但如果它硬编码到控制器中，它就会像预期的那样工作。

编辑:如果有人能更雄辩地陈述我的问题，请随意编辑标题。