title: Custom filter vs filter function in controller performance comparison
body: <p>Suppose I have an array of 5000 objects (with boolean values) which I have to <code>ng-repeat</code> in the template:</p>
  
  <pre><code>$scope.arr = [
      {
          "value": true
      },
      {
          "value": false
      },
      {
          "value": false
      }
      //and so on
  ]
  </code></pre>
  
  <p>Now, I want to filter this <code>ng-repeated</code> array on the basis of a dynamic variable, say 'show_filter', which I am setting elsewhere. </p>
  
  <p>If 'show_filter' is set to 'all' I want to show all the objects. If it is set to false (the boolean value) then I want to show objects with 'value' key set to false. Same goes for when 'show_filter' is set to true.</p>
  
  <p>So, there are two approaches:</p>
  
  <p><strong>1. Build a custom filter:</strong></p>
  
  <p>I would write a custom filter for the filtering task like this:</p>
  
  <p><em>filter:</em></p>
  
  <pre><code>app.filter('filterArr', function() {
      return function(arr, show_filter) {
          var filtered_arr = [];
          if(show_filter != 'All') { //if show_filter is a boolean value
              for(var i = 0; i &lt; arr.length; i++) {
                  if(arr[i].value == show_filter) { 
                      filtered_arr.push(arr[i]);
                  }
              }
              return filtered_arr;
          }
          else {
              return arr; //return the entire array if show_filter is set to 'All'
          }
      }
  })
  </code></pre>
  
  <p><em>template:</em></p>
  
  <pre><code>obj in arr | filterArr : show_filter
  </code></pre>
  
  <p><strong>2. Write a filter function in the controller:</strong></p>
  
  <p><em>filter:</em></p>
  
  <pre><code>$scope.filterObjects = function(arr) {
      var filtered_arr = [];
      if($scope.show_filter != 'All') { //if $scope.show_filter is a boolean value
          for(var i = 0; i &lt; arr.length; i++) {
              if(arr[i].value == $scope.show_filter) { 
                  filtered_arr.push(arr[i]);
              }
          }
          return filtered_arr;
      }
      else {
          return arr; //return the entire array if show_filter is set to 'All'
      }
  }
  </code></pre>
  
  <p><em>template:</em></p>
  
  <pre><code>obj in filterObjects(arr)
  </code></pre>
  
  <p><strong>Which of the above two methods will be faster?</strong> I have seen the custom filter code execute everytime for each digest loop and not only for changes made to <code>$scope.show_filter</code>, which leds me to believe its quite inefficient. Although I am not sure which is faster between the two ways.</p>