var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var me = this;
  
  //------------------------------------------------------------------
  // Each filter you want to process should go in the MAP method
  //------------------------------------------------------------------
  $scope.filters = function(item, index) {
    var t_results = _.map([$scope.filter1, $scope.filter2, $scope.filter3], function(fnc) {
      return(_.isFunction(fnc) ? fnc(item,index) : true);
    });  
    
    return(t_results.every(function(e) {return(e == true);}));
  };
  
  // Data
  $scope.filter1    = '';
  $scope.filter2    = '';
  $scope.filter3    = '';
  $scope.name       = 'World';
  $scope.citrus     = ['orange',
                       'lemon'];
  $scope.vegetables = ['tomato',
                       'zucchini'];
  $scope.fruits     = ['orange',
                       'banana',
                       'lemon',
                       'apple',
                       'kiwi',
                       'pineapple',
                       'pear'];
  $scope.edibleSkin  = ['tomato',
                       'apple',
                       'pear'];
  $scope.basket     = ['orange',
                       'banana',
                       'lemon',
                       'tomato',
                       'apple',
                       'zucchini',
                       'kiwi',
                       'pineapple',
                       'pear'];
                   
  // Methods - filters
  $scope.filterNone = function(item,index) {
    return(true);
  };
  
  me.funcIsInList = function(list) {
    return(function(item,index) {
      for (var i in list) {
        if (list[i] === item)
          return(true);
      }
      return(false);
    });
  };
  $scope.filterCitrus     = me.funcIsInList($scope.citrus);
  $scope.filterVegetables = me.funcIsInList($scope.vegetables);   
  $scope.filterFruits     = me.funcIsInList($scope.fruits);  
  $scope.filterEdibleSkin = me.funcIsInList($scope.edibleSkin);  
  $scope.filterOdd = function(item, index) {
    return(index % 2 === 1);
  };
  $scope.filterEven = function(item, index) {
    return(index % 2 === 0);
  };
  
  $scope.setNone = function() {
    $scope.filter1 = $scope.filter2 = $scope.filter3 = '';
  };
  
  // $scope.setCitrus = function() {
  //   $scope.filter = $scope.filterCitrus;
  // };
  // $scope.setOdd = function() {
  //   $scope.filter = $scope.filterOdd;
  // };
  // $scope.setEven = function() {
  //   $scope.filter = $scope.filterEven;
  // };
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
    <script data-require="lodash.js@4.6.1" data-semver="4.6.1" src="https://cdn.jsdelivr.net/lodash/4.6.1/lodash.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <button ng-click="setNone()">No filter</button>
    <br><br>
    <button ng-click="filter1 = (filter1 == filterOdd) ? '' : filterOdd"
            ng-class="{'active': filter1 == filterOdd}">Odd</button>
    <button ng-click="filter1 = (filter1 == filterEven) ? '' : filterEven"
            ng-class="{'active': filter1 == filterEven}">Even</button>
    <br>
    <button ng-click="filter2 = (filter2 == filterFruits) ? '' : filterFruits"
            ng-class="{'active': filter2 == filterFruits}">Fruits</button>
    <button ng-click="filter2 = (filter2 == filterVegetables) ? '' : filterVegetables"
            ng-class="{'active': filter2 == filterVegetables}">Vegetables</button>
    <button ng-click="filter2 = (filter2 == filterCitrus) ? '' : filterCitrus"
            ng-class="{'active': filter2 == filterCitrus}">Citrus</button>
    <br>
    <button ng-click="filter3 = (filter3 == filterEdibleSkin) ? '' : filterEdibleSkin"
            ng-class="{'active': filter3 == filterEdibleSkin}">EdibleSkin</button>
    
    <hr>
    <ul>
<!--       <li ng-repeat="b in basket | filter: filter1 
                           | filter: filter2
                           | filter: filter3">
 -->
      <li ng-repeat="b in basket | filter: filters">
        <span ng-bind="b"></span>
      </li>
    </ul>
  </body>

</html>
/* Put your css in here */
button {
  background: #eee;
  border: 1px solid #ccc;
  width: 80px;
  margin: 2px;
  cursor: pointer;
}
button:hover {
  background: #ddd;
}
button.active {
  background: orange;
  font-weight: bold;
  color: white;
}