title: Show/hide table rows based on dynamic content in AngularJS?
body: <p>I have an HTML table as follows:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr ng-show="showCats"&gt;&lt;td&gt;Cat&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
    &lt;tr ng-show="showDogs"&gt;&lt;td&gt;Dog&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr&gt;
    &lt;tr ng-show="showCats"&gt;&lt;td&gt;Cat&lt;/td&gt;&lt;td&gt;4&lt;/td&gt;&lt;/tr&gt;
    &lt;tr ng-show="showDogs"&gt;&lt;td&gt;Dog&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr ng-show="showCats"&gt;&lt;td&gt;Cat&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt;
    &lt;tr ng-show="showLizards"&gt;&lt;td&gt;Lizard&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
    &lt;tr ng-show="showLizards"&gt;&lt;td&gt;Lizard&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
    &lt;tr ng-show="showMice"&gt;&lt;td&gt;Mouse&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;/tr&gt;
    &lt;tr ng-show="showMice"&gt;&lt;td&gt;Mouse&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt;
    &lt;tr ng-show="showDogs"&gt;&lt;td&gt;Dog&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And links as follows:</p>
  
  <pre><code>&lt;a href="#" ng-click="showRows('all')"&gt;Show all&lt;/a&gt;
  &lt;a href="#" ng-click="showRows('cats')"&gt;Cats&lt;/a&gt;
  &lt;a href="#" ng-click="showRows('dogs')"&gt;Dogs&lt;/a&gt;
  &lt;a href="#" ng-click="showRows('lizards')"&gt;Lizards&lt;/a&gt;
  &lt;a href="#" ng-click="showRows('mice')"&gt;Mice&lt;/a&gt;
  </code></pre>
  
  <p>What's the proper way in Angular to hide/show each row when an animal type is clicked? I'm aware of <a href="http://docs.angularjs.org/api/ng.filter%3afilter" rel="nofollow">filter</a>, but I'm under the impression that that only works for tables generated in Angular using <code>ng-repeat</code>. (This table is being generated server-side.)</p>
  
  <p>I have a working solution that manually sets each <code>showAnimal</code> variable to true/false based on what was clicked, but this seems like an inefficient, unscalable approach. Thanks!</p>