javascript - Updating ng-repeat on changes to scope properties not associated with bound data -

i'm working on angular (1.2.1) app, , i've got directive ng-repeat in template so:

 <div ng-repeat="item in list | filter: filterlist"></div>   <button ng-click="setcolormode('red')">show red items</button>  <button ng-click="setsizemode('small')">show small items</button>  <!-- etc... --> 

something in directive controller:

$scope.list = [     { color: 'red',  size: 'large' },     { color: 'blue', size: 'small' }     //... ]  $scope.colormode = null;  $scope.sizemode = null;  $scope.setcolormode = function(value){$scope.colormode = value;} $scope.setsizemode = function(value){$scope.sizemode = value;}   $scope.filterlist = function(item){      if ($scope.colormode){         if ($scope.colormode != item.color) return false;     }     if ($scope.sizemode){         if ($scope.sizemode != item.size) return false;     }      return true; } 

colormode , sizemode initialized null, meaning items of colors , sizes displayed in repeat (because both of conditionals in filter function evaluate false, true returned).

the ui allows user filter list show items of given size and/or color, in case appropriate $scope.___mode variable set value given, causing filter function check , return false on items field values not match value given.

my problem toggling between modes changes variables on $scope, it not change data ng-repeat bound to. result, filter function isn't re-executed when mode changes, , contents of ng-repeat remain unchanged until in data change.

intuitively, had expected that, because $scope fields used determine results of filter function explicitly mentioned in ng-repeat, angular $watch values , update on changes them. alas, not seem case, i'm left ask:

what's cleanest way i'm trying do?

i hack around altering on data array in mode setter functions, (contrary simplified example here), data doesn't belong controller - it's accessed through service shares other controllers simultaneously, i'd rather not that. , in case, surely there's better solution... right?

you have several options: 1. filtering manually (create array filteredlist, fill it, in methods setxxxmode recompute manually) 2. write custom filter, in js:

app.filter('myfilter', function() {   return function(itemlist, mode, value) {     if (mode...)   } }) 

in html:

ng-repeat="item in list | myfilter:mode:value" <button ng-click="mode='color';value='red'">show red items</button> 

2nd approach looks nicer , here i'd prefer it; if array huge , contain complex objects 1 approach better, cause u can control how filtering launches.

and can use filter this:

p.s. if example exact, u can use:

ng-repeat="item in list | filter:{mode:value}" <button ng-click="mode='color';value='red'">show red items</button>