Without looking too much (read at all) why your attempts failed, you can achieve what you want like this:
1.)
Define a list of filters and the currently selected (applied) filter in the contoller:
$scope.filters = [
{name: 'none', filterExpr: ''},
{name: 'must buy', filterExpr: {mustBuy: true}},
{name: 'promotion', filterExpr: {promotion: true}}
];
$scope.selectedFilter = $scope.filters[0];
(My filter-object have a name
and a filterExpr
, but you can adjust them to your needs.)
2.)
Define a function for changing the applied filter (again in the contoller of course):
$scope.setFilter = function (filter) {
$scope.selectedFilter = filter;
};
3.)
Let the user change the applied filter (in the view):
<ul>
<li ng-repeat="filter in filters">
<a href="" ng-click="setFilter(filter)">{{filter.name}}</a>
</li>
</ul>
4.)
Filter the items, based on the currently selected filter's filter-expression:
<ul>
<li ng-repeat="item in items | filter:selectedFilter.filterExpr">
{{item.description}}
</li>
</ul>
See, also, this short demo.