angularjs - AngularJS を使用して、選択した一連のタグに基づいてアイテムのリストを更新するにはどうすればよいですか?

Question

アプリには、それぞれがタグを表すチェックボックスのリストと、それぞれに関連付けられた 1 つ以上のタグを持つ項目のリストを持つ単純なナビゲーション コントロールがあります。1 つ以上のタグがチェックされている場合、それらのタグを持つアイテムが表示されます。

2 つのデータセットがあります。1 つはすべてのアイテムのタグのセットをリストし、もう 1 つはすべてのタグのアイテムのセットをリストします。

これまでのところ、私のコードは次のようになります。

HTML:

<div id="tag-selector" ng-controller="tagSelectorController">
   <label ng-repeat="tag in tags" style="display:block;">
      <input type="checkbox" ng-model="tag.selected"/>
       {{tag.name}}
      </label>
 </div>
 <hr>
 <div id="item-selector" ng-controller="tagSelectorController">
   <div ng-repeat="item in items" ng-show="(item.name | tagFilter:this.selection)">
       {{item.name}}
   </div>
 </div>

JS:

var app = angular.module("tagSelectorApp", []);

app.filter("tagFilter", function () {
           return function (input, selection) {
                    for (var tag in selection) {
                       if (selection[tag].items.indexOf(input) > -1) {
                          return true;
                       }
                    }
                    return false;
                  }
           });

app.controller("tagSelectorController", [
  "$scope",   
  tagSelectorController = function($scope) {
      $scope.tags = [{"name": "tag1",
                      "items": ["item1", "item3"],
                      "selected": true
                      },
                     {"name": "tag2",
                      "items": ["item1", "item2"],
                      "selected": false
                      },
                     {"name": "tag3",
                      "items": ["item3", "item1"],
                      "selected": true
                      }
                    ];

       $scope.items = [{"name": "item1",
                      "tags": ["tag1", "tag2", "tag3"]
                      },
                     {"name": "item2",
                      "tags": ["tag2"]
                      },
                     {"name": "item3",
                      "tags": ["tag1", "tag3"]
                      }
                    ];
      $scope.selection = [];
      $scope.$watch("tags | filter:{selected:true}", 
                    function (selectedTags) {
                        $scope.selection = selectedTags;
                    },
                    true);
   }
]);

angular.bootstrap(angular.element(document.getElementById("tag-selector")), ["tagSelectorApp"]);
angular.bootstrap(angular.element(document.getElementById("item-selector")), ["tagSelectorApp"]);

私が抱えている問題は次のとおりです。項目リストは最初のタグ選択状態を正しく反映していますが、その後のチェックボックスのチェック/チェック解除では変更されません。チェックボックスをチェックするたびにスコープが変更され、項目リストが再フィルタリングされるという印象を受けましたが、そうではないようです。

私は何が欠けていますか？

jsfiddle の上記のコードは次のとおりです: http://jsfiddle.net/2Vb2z/1/