How to filter a list in AngularJS using several links

You can bind your filter to scope variables as you do with any other thing. So all you need is to set the appropriated filter to the scope when the user click and bind it to the ng-repeat filter param. See:

<div ng-app>  <span ng-click="myFilter = {type: 1}">Type 1</span> |   <span ng-click="myFilter = {type: 2}">Type 2</span> |  <span ng-click="myFilter = null">No filter</span>  <ul ng-controller="Test">    <li ng-repeat="person in persons | filter:myFilter">{{person.name}}</li>  </ul></div>

function Test($scope) {  $scope.persons = [{type: 1, name: 'Caio'}, {type:2, name: 'Ary'}, {type:1, name: 'Camila'}];}

Notice that the myFilter is changed when the user clicks the filter, and that it's bound to the ng-repeat filter. Fiddle here. You could also create a new filter, but this solution is far better.

My response is very similar to Caio's. I just wanted to show how to filter out an existing array.

In my ng-repeat I have a search filter that goes through the words. I wanted tabs to look for a string match. So I added a additional filter

 <tr class="unEditableDrinks" ng-repeat="drink in unEditableDrinkList | orderBy:'-date'|limitTo:400|filter:search |filter:myFilter">    <td>[[drink.name]]</td>

I only have the top part of my table but this should show the strategy. The second filter called myFilter is attached to the buttons below.

<div class="btn-group" role="group">   <button type="button" class="btn btn-primary" ng-click="myFilter={name:'soda'}">Soda</button></div><div class="btn-group" role="group">    <button type="button" class="btn btn-primary" ng-click="myFilter={name:'energy'}">Energy Drinks</button></div>

On each button I am able to add a ng-click that goes through myFilter and searches the td with drink.name. In each ng-click I can set the value of name to search. So every title containing soda or energy can be filtered through.