title: angular ng-repeat filter with conditions?
body: <p>I'm writing an angular app, and want to display customer results in a table using ng-repeat. I can hook up ng-filter to an ng-model and search the results, but I'd like to know how I can add in checkboxes to modify my results.</p>
  
  <p>For example, say I have this data:</p>
  
  <pre><code>[{
      "name": "Bob Smith",
      "percent": 100,
      "notes": "100 percent complete"
   },
   {
      "name": "Sally Brown",
      "percent": 75,
      "notes": "Not yet at 100 percent"
   }
      ....
   ]
  </code></pre>
  
  <p>My current app lets users search for anything in here, like a regular ng-repeat with a filter would:</p>
  
  <pre><code>&lt;input ng-model="query.$"&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Percent&lt;/th&gt;
          &lt;th&gt;Notes&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="customer in customers | filter:query"&gt;
          &lt;td&gt;{{ customer.name }}&lt;/td&gt;
          &lt;td&gt;{{ customer.percent }}&lt;/td&gt;
          &lt;td&gt;{{ customer.notes }}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;input ng-model="query.completed" type="checkbox"&gt; Show Completed Jobs
  </code></pre>
  
  <p>But I'd like a checkbox on the side that says "Show customers with 100%". I've tried writing a filter function:</p>
  
  <pre><code>.filter('show100percent', function() {
      return function(items, showcompleted) {
          var jobs = []
          items.forEach(function(item) {
              if (showcompleted == false) {
                  if (item.percent &lt; 100) {
                      jobs.push(item)
                  }
              } else {
                  jobs.push(item)
              }
          })
          return jobs
      }
  })
  </code></pre>
  
  <p>But doing so stops my app from accepting input from the textbox</p>
  
  <pre><code>&lt;tr ng-repeat="customer in customers | show100percent:query.completed"&gt;
  </code></pre>
  
  <p>And adding my filter on top of the regular filter just shows a blank set of results:</p>
  
  <pre><code>&lt;tr ng-repeat="customer in customers | show100percent:query.completed | filter:query"&gt;
  </code></pre>
  
  <p>Am I doing something wrong? How can I make my data searchable via the inputbox, but modify the results with a checkbox, select, second inputbox or any other kind of form element?</p>