javascript - filtering column with combobox in angular ngtable -

i'm trying implement 'custom filtering' in angularjs table using ngtable similar this example, in case 'data' being fetched asynchronously , takes time. problem i'm facing when accessing page, function in controller (while other functions work fine) never runs, when debugging steps on 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> 

as predicted, 'documents' not yet loaded when 'docnames' list being evaluated. resolved resolving defer before first use of it:

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);             });        }   }); 

and

$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; };