title: AngularJS multiple filter with custom filter function
body: <p>I am trying to filter the list with multiple filters + with a custom filter function.</p>
  
  <p>The original working jsfiddle example is <a href="http://jsfiddle.net/ed9A2/1/">http://jsfiddle.net/ed9A2/1/</a> but now I want to change the way age are being filter. </p>
  
  <p>I want to add a custom filter so that <strong>age</strong> it filter based on two input value which is <strong>min_age</strong> and <strong>max_age</strong> , (between age) .</p>
  
  <p>After looking into doc. I found people having similar questions and a user Mark Rajcok answer <a href="http://docs.angularjs.org/api/ng.filter:filter#comment-648569667">http://docs.angularjs.org/api/ng.filter:filter#comment-648569667</a> looks good and should be working.  But I am having problem applying it into my codes which mainly seems to because I have other multiple filters.  </p>
  
  <p>Im very new to AngularJS :(</p>
  
  <p>My tried and NOT working fiddle is here <a href="http://jsfiddle.net/ed9A2/20/">http://jsfiddle.net/ed9A2/20/</a></p>
  
  <p>A copy paste of my NOT working codes are here</p>
  
  <p>View</p>
  
  <pre><code>&lt;div ng-app ng-controller="MainController"&gt;
  &lt;table class="fancyTable"&gt;
      &lt;tr&gt;
          &lt;th&gt;Player id&lt;/th&gt;
          &lt;th&gt;Player name&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input ng-model="player_id" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input ng-model="player_name" /&gt;&lt;/td&gt;
          &lt;td&gt;
              Min Age:&lt;input ng-model="min_age" /&gt;
              Max Age:&lt;input ng-model="max_age" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="player in players | filter:{id: player_id, name:player_name, age:ageFilter}"&gt;
          &lt;td&gt;{{player.id}}&lt;/td&gt;
          &lt;td&gt;{{player.name}}&lt;/td&gt;
          &lt;td&gt;{{player.age}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>Controller</p>
  
  <pre><code>function MainController($scope) {
  
  $scope.player_id = "";
  $scope.player_name = "";
  $scope.player_age = "";
  $scope.min_age = 0;
  $scope.max_age = 999999999;
  
  $scope.ageFilter = function(player) {
      return ( player &gt; $scope.min_age &amp;&amp; player.age &lt; $scope.max_age);
  }
  
  $scope.players = [
          {"name": "Rod Laver",
              "id": "rod",
              "date": "1938/8/9",
              "imageUrl": "img/rod-laver.gif",
              "age": 75},
          {"name": "Boris Becker", 
              "id": "borix",
              "date": "1967/11/22",
              "imageUrl": "img/boris-becker.gif",
              "age": 45},
          {"name": "John McEnroe",
              "id": "mcenroe",
              "date": "1959/2/16",
              "imageUrl": "img/john-mc-enroe.gif",
              "age": 54},
          {"name": "Rafa Nadal",
              "id": "nadal",
              "date": "1986/5/24",
              "imageUrl": "img/ndl.jpg",
              "age": 27}
      ]
  }
  </code></pre>