Correct your tagFilter
like this:
app.filter("tagFilter", function () {
return function (input, selection) {
var filterItems = [];
for (var i=0;i< input.length;i++){
for (var tag in selection) {
if (selection[tag].items.indexOf(input[i].name) > -1) {
filterItems.push(input[i]);
break;
}
}
}
return filterItems;
}
});
Modify your HTML to use only 1 controller so that you can share your selection
:
<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>
<hr>
<div ng-repeat="item in items | tagFilter:selection"> //change expression to tagFilter:selection
{{item.name}}
</div>
</div>
If you need to use ng-show
to display the items, try this:
<div ng-repeat="item in items" ng-show="isShown(item)">
Add this function to your scope:
$scope.isShown = function(item){
for (var tag in $scope.selection) {
if ($scope.selection[tag].items.indexOf(item.name) > -1) {
return true;
}
}
return false;
}