title: How to show element based on condition using ng-hide and ng-repeat
body: <p>I am using AngularJS and I have a table of items that I want to be able to display based on their color. For example, if I click on the "SHOW GREEN" and "SHOW RED" checkboxes, the table will show only the items that are green or red. <br/><br/></p>
  
  <p>This is the item object:</p>
  
  <pre><code>{"name":"Fire Truck", "color":"red"}
  </code></pre>
  
  <p>Here are my checkboxes, which when clicked will evaluate to TRUE or FALSE:</p>
  
  <pre><code>&lt;select id="item_color" ng-model='color'&gt;
     &lt;option value='green'&gt;SHOW GREEN&lt;/option&gt;
     &lt;option value='red'&gt;SHOW RED&lt;/option&gt;
     &lt;option value='blue'&gt;SHOW BLUE&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And here is my table:</p>
  
  <pre><code>&lt;tr ng-repeat="item in items" ng-hide='???'&gt;
     &lt;td&gt;{{item.name}} &lt;/td&gt;
     &lt;td&gt;{{item.color}} &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>So how can I have my table dynamically show the desired items?
  The ideal solution would also allow me to list 3 seperate tables for all items of each color. I am little stumped on how to go about this. Any ideas?</p>