Select filter in ngTable does not update when ngtable reload is called

Question

I have a situation where I need to show all data on checkbox click, which reloads the ngtable, but the select filter does not load and shows previous value. Is there any other way to reload ngtable filters? Here is my plunker for the problem.

Code

<input id="datalabels" ng-model="taskCheckbox.isNormal" ng-change="allTaskCheckboxClicked(taskCheckbox.isNormal)" type="checkbox">
<label for="datalabels" style="font-weight:bold;">Show All Tasks</label>
<table ng-table="taskDetailTableParams" show-filter="true" class="table upgradeTaskDetailTable text-left table-bordered">
    <tbody>
        <tr ng-repeat="item in $data" height="10px" class="animate" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
            <td data-title="" class="text-center col-sm-1 col-md-1 col-lg-1" header-class="text-left" filter="{ 'ctaskId': 'select' }" sortable="'ctaskId'" filter-data="filterCTasks($column)">
                <img ng-src="{{ item.taskImage }}" title="{{ item.task }}" data-toggle="tooltip" data-placement="bottom" />
            </td>
            <td data-title="'Task Name'" class="text-left col-sm-3 col-md-3 col-lg-3" header-class="text-left" filter="{ 'name': 'text' }" sortable="'name'">{{ item.name }}</td>
            <td data-title="'Type of Task'" class="text-center col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'type': 'text' }" sortable="'type'">{{item.type}}</td>
            <td data-title="'latest Run'" class="text-center col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'selectIdFor0': 'select' }" sortable="'selectIdFor0'" filter-data="filterStatusFor0($column)">
                <img ng-src="{{ item.statusImageFor0 }}" title="{{ item.statusFor0 }}" data-toggle="tooltip" data-placement="bottom" />
            </td>
            <td data-title="'2nd Latest Run'" class="text-center col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'selectIdFor1': 'select' }" sortable="'selectIdFor1'" filter-data="filterStatusFor1($column)">
                <img ng-src="{{ item.statusImageFor1 }}" title="{{ item.statusFor1 }}" data-toggle="tooltip" data-placement="bottom" />
            </td>
            <td data-title="'3rd Latest Run'" class="text-center col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'selectIdFor2': 'select' }" sortable="'selectIdFor2'" filter-data="filterStatusFor2($column)">
                <img ng-src="{{ item.statusImageFor2 }}" title="{{ item.statusFor2 }}" data-toggle="tooltip" data-placement="bottom" />
            </td>
        </tr>
    </tbody>
</table>

$scope.filterCTasks = function(column) {
    console.log(JSON.stringify(column));
    var def = $q.defer(),
        arr = [],
        filterStatus = [];
    angular.forEach($scope.taskDetailData, function(item) {
        if (jQuery.inArray(item.ctaskId, arr) === -1) {
            arr.push(item.ctaskId);
            filterStatus.push({
                'id': item.ctaskId,
                'title': item.task
            });
        }
    });
    filterStatus.sort(function(a, b) {
        if (a.id < b.id)
            return -1;
        if (a.id > b.id)
            return 1;
        return 0;
    });
    def.resolve(filterStatus);
    return def;
}

Caespitose

have you tried using ng-grid.. it has lots of options angular-ui.github.io/ui-grid – Cumber

@jos: we are using ngtable for our web app and most of the code is already written for ngtable. – Caespitose

If possible I would suggest testing your example with "ng-table": "~0.8.3", and see if your problem is resolved. There is a mode that enables binding to an array (without the need of implementing getData). Check this out ng-table.com/#/loading/demo-lazy-loaded – Mauro