cascading dropdown filters with ng-table

Question

I'm trying to get filter support on ngTable with two external cascading dropdowns. as the documentation shows i have updated filterOptions but seems no luck. please help me

$scope.tblInventory = new ngTableParams({
    page: 1,
    count: 10,
    filter: $scope.searchObjs,
}, {
    total: 0,
    getData: function ($defer, params) {
        inventoryService.getAllVehicles().then(function (data) {
            params.total(data.length);
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        });
    }
});

my Html mark up

<select class="form-control" id="make" name="make" data-ng-model="searchObj.make"
        data-ng-disabled="!searchObj.makes"
        ng-options="make for make in makes">
    <option style="display:none" value="">Select a make</option>
</select>
<label>
    Model
</label>
<select class="form-control" id="model" name="model" data-ng-model="searchObj.model"
        data-ng-disabled="!searchObj.models"
        ng-options="model for model in models">
    <option style="display:none" value="">Select a model</option>
</select>


<table ng-table="tblInventory" class="table">
    <tr ng-repeat="item in $data">
        <td data-title="'Stock'">
            {{item.stockNumber}}
        </td>
        <td data-title="'Make'">
            {{item.make}}
        </td>
        <td data-title="'Model'">
            {{item.model}}
        </td>
    </tr>
</table>

Answer 1

There are actually a few issues here. Firstly, you refer to searchObj in your view, but the object attached to your scope is actually called searchObjs. Secondly, you're not actually using the filter in your getData function. So inside your return from inventoryService, you need to apply the filter, something like this:

      data = params.filter() ?
           $filter('filter')(data, params.filter()) :
           data;
      params.total(data.length);
      $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));

Here's a plnkr does what you need.

Another thing you might want to consider (though this wouldn't cause your code not to work) is whether you want to call inventoryService every time your filter changes. getData will be called for every filter change so you might want to retrieve all of the inventory from the service outside getData, and only perform your filtering/paging etc inside getData.

Update:

Yes, you can put the call to the service in the main controller function, then add the data and the ngTableParams inside the then function on the promise return. I've created a new plnkr demonstrating this.