title: Angular switch in repeater
body: <p>Given a list such as </p>
  
  <pre><code>var list = ['one','two','three'];
  </code></pre>
  
  <p>In angular, I want to iterate through the list only rendering certain items. Something like:</p>
  
  <pre><code>&lt;ul ng-controller="main"&gt;
      &lt;li ng-repeat="item in list" ng-switch on="item"&gt;
          &lt;span ng-switch-when="one"&gt;{{item}}&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And have the output look like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;span&gt;one&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Instead, I get:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;span&gt;one&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have tried ng-hide but is woefully inefficient since I have a large number of items and only want to display one or two and ng-hide renders all of them and then hides the inactive ones with css. This is a problem because I am doing this in a JQuery Mobile app which tries to decorate all list items, including the hidden ones, killing performance.</p>
  
  <p>JSFiddle at <a href="http://jsfiddle.net/ghendricks/MXu3a/" rel="nofollow">http://jsfiddle.net/ghendricks/MXu3a/</a></p>