Smart Table angular filter not updating the page

Question

i crated this plunker

https://plnkr.co/edit/zrSgAG3NctuveLTNgnZS?p=preview

as you can see there is a global search you can search by or click category like eyeColor or gender to filter by that category. filter works great. however the page on footer does not correctly reflect the datasize. page count does not change despite the filter has not shrink-ed the data set. I am not using st-filter since i need to support click and filter for example the eye color and gender where you can click on category you want to filter by.

I am using searcQuery filter this way instead
      <input type="search" ng-model="vm.searchQuery" placeholder="Global search" class="input-sm form-control" />
.
.
.

    ng-repeat-start="artists in (displayedCollection | filter: vm.searchQuery)">

any ideas what am i doing wrong?

Answer 1

you have to call directly the table api .search() function. By default smart-table is unidirectional and does not need ngModel (to avoid sophisticated/complex bidirectional state sync). If you want to do so, I suggest you wrap your behaviour in a directive watching for model change and calling table api

app.directive('filter',function(){
    return {
        require:'stTable',
        scope:{
            filter:'='
        },
        link:function(scope,el,att,table){
                scope.$watch('filter',function(val){
                    table.search(val);
                });
        }
    }
})

plunker