List filter column in angular ngtable

Question

I am trying to implement “user filtering” in an angle table using an ngtable similar to this example , but in my case the “data” is selected asynchronously and it takes some time. The problem I am facing is that when accessing the page this function in the controller (while other functions work fine) never starts when debugging just goes through it.

$scope.docNames = function(column) {
    var def = $q.defer(),
        arr = [],
        names = [];
    angular.forEach(data, function(item){
        if (inArray(item.name, arr) === -1) {
            arr.push(item.name);
            docNames.push({
                'id': item.Name,
                'title': item.Name
            });
        }
    });
    def.resolve(docNames);
    return def;
};

My ngTable object:

$scope.tableParams = new ngTableParams(
    {
        page: 1,
        count: 10,
        sorting: {
            Date: 'desc'
        }
     },
     {
         total: 0,
         getData: function ($defer, params) {

             factory.getData().then(function (result) {
                 documents = result.data;

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

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

                 //pagination
                 $scope.documents = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                 params.total(orderedData.length);
                 $defer.resolve($scope.documents);
            });
       }
  });

My html:

<table data-ng-table="tableParams" data-show-filter="true" class="table table-striped">
    <tr data-ng-repeat="document in $data">
        <td data-title="'Name'" filter="{ 'Name': 'select' }" filter-data="docNames($column)" data-sortable="'Name'">{{ document.Name }} </td>
        <td data-title="'Size'" filter="{ 'Size': 'text' }" data-sortable="'Size'">{{ document.Size }}</td>
        <td data-title="'Date'" data-sortable="'Date'">{{ document.Date }}</td>
    </tr>
</table>

Answer 1

, "" , "docNames". , :

var qDocse = $q.defer();
qDocs.resolve(factory.getData());
$scope.tableParams = new ngTableParams(
    {
        page: 1,
        count: 10,
        sorting: {
             Date: 'desc'
        }
    },
    {
        total: 0,
        getData: function ($defer, params) {
            qDocs.promise.then(function (result) {
                documents = result.data;

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

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

                //pagination
                $scope.documents = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
                params.total(orderedData.length);
                $defer.resolve($scope.documents);
            });
       }
  });

$scope.docNames = function (column) {
    var def = $q.defer(),
        arr = [],
        docNames = [];
    qDocs.promise.then(function (result) {
        angular.forEach(result.data, function (item) {
            if (inArray(item.Name, arr) === -1) {
                arr.push(item.Name);
                docNames.push({
                    'id': item.Name,
                    'title': item.Name
                    });
                }
            });
        });
     def.resolve(docNames);
     return def;
};