javascript - ng-repeat bind collection filtered by a boolean using tabs, when I update the collection the filter doesn't re-apply -

i have ng-repeat displays collection filtered boolean using tabs (favourite item), when update collection filter doesn't re-apply. have:

all items | favourites

• item 1
• item 2
• item 3

when first load (using json) collection server, tabs work fine , filters collection. when click in item, update favourite property of item, filter doesn't updates , if click in tabs seems data doesn't updated.

code:

html:

<button class="btn" ng-model="section" value="all-items" ng-click="filtercriteria={};   activate('all-items')" ng-class="{disabled: products.length == 0, active: section == 'all-items'}">all items ({{products.length}})</button>  <button class="btn" ng-model="section" value="favourites" ng-click="activate('favourites'); filtercriteria.favourite = true;" ng-class="{disabled: (products | filter: {favourite:true}).length < 0, active: section == 'favourites'}">favourites</button>  <!-- list of products --> <ul>     <li ng-repeat="product in products | filter: filtercriteria">         <button class="btn" type="button" ng-click="favouriteclick(product)">favourite</button>         <p>{{product.description}}</p>     </li> </ul> 

controller

app.controller('productlistctrl', ['$scope', '$http', function ($scope, $http, $filter)     {      $http.get('/products').success(function (data) {         $scope.products = data;     });      $scope.filtercriteria = {};     $scope.section = "all-items";      $scope.activate = function (option) {         $scope.section = option;     };      $scope.favouriteclick = function (product) {          product.favourite = !product.favourite;          // sync back-end         $http({             method: 'post',             url: '/setfavourite',             data: 'name=' + product.sku + '&value=' + product.favourite,             headers: { 'content-type': 'application/x-www-form-urlencoded' }         });     }; } ]); 

any feedback appreciated. thanks

edit

i have created fiddle solution http://jsfiddle.net/njrhm/

it's casing issue. you've got:

ng-click="activate('favourites'); filtercriteria.favourite = true;" 

...and you've got:

product.favourite = !product.favourite; 

i gather want change ngclick use lowercase favourite.