title: Dynamically filter ng-repeat on ng-click
body: <p>I'm building an app at <a href="http://creditcardairlinepoints.com" rel="nofollow">http://creditcardairlinepoints.com</a> and I want the user to be able to filter an array of credit cards by clicking a filter on the side of the interface e.g. only Amex cards, cards with no fee.</p>
  
  <p>I'm able to bind the filter function to the user clicking the filter, but the function itself doesn't work as planned. There are two problems:</p>
  
  <ol>
  <li>I can't seem to get the filter to default to null. One of the links is to display 'all cards' which works on click, by setting the filter to null but I can't get this to on page load.</li>
  <li>I need to dynamically generate the filter e.g. cardFee:0, minSpend:0, bonusCurrency:amex and I'm not able to do this.</li>
  </ol>
  
  <p>I'm wondering if I'm going about this the wrong way and rather than generate the filter based on variables passed in from the array via the front end I should setup a loop e.g. </p>
  
  <ul>
  <li>if filterId = 0, do nothing</li>
  <li>if filterId = 1, show amex cards</li>
  </ul>
  
  <p><strong>Filter list</strong></p>
  
  <p>The list of filter links generated from an array using ng-repeat. I've bound this successfully to the function below and can successfully pass values to it.</p>
  
  <pre><code>&lt;ul class="nav nav-sidebar"&gt;
      &lt;li ng-repeat="filter in filters" 
          ng-click="selectFilter($index);setFilter(filter.property, filter.value)" 
          ng-class="{active: $index===selectedIndex}"&gt;
          &lt;a href="#"&gt;{{ filter.anchor }}&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Card Output</strong></p>
  
  <p>Cards output to table cells in a given row, this is what I'd like to filter on click.</p>
  
  <pre><code>&lt;tr ng-repeat="card in cards | orderBy:predicate:reverse | filter:cardFilter"&gt;
  </code></pre>
  
  <p><strong>Filter array</strong></p>
  
  <p>The card array works fine and if I code up any of these filters statically it works.</p>
  
  <pre><code>$scope.filters = [
      {
          'filterId': 0,
          'anchor': 'All cards',
          'property': '',
          'value': ''
      },
      {
          'filterId': 1,
          'anchor': 'American Express cards',
          'property': 'bonusCurrency',
          'value': 'amex'
      },
      {
          'filterId': 2,
          'anchor': 'Avios cards',
          'property': 'bonusCurrency',
          'value': 'avios'
      },
      {
          'filterId': 3,
          'anchor': 'No fee',
          'property': 'cardFee',
          'value': '0'
      },
      {
          'filterId': 4,
          'anchor': 'No minimum spend',
          'property': 'minSpend',
          'value': '0'
      }
  ];
  </code></pre>
  
  <p><strong>Filter function</strong></p>
  
  <p>What I'm trying to achieve, a dynamically generated filter with a null default.</p>
  
  <pre><code>/* Set first filter link to default */
  $scope.cardFilter = ''; 
  
  $scope.setFilter = function ( k, v ) {
      $scope.cardFilter = {k:v};
  };
  </code></pre>