title: How to show / hide a list of items with a button based on the number of items (Angular)
body: <p>I have a list of items like:</p>
  
  <pre><code>    &lt;ul&gt;
        &lt;li ng-repeat="show in data_shows"&gt;
          &lt;span class="program_shows_show_day"&gt;{{show[2]*1000 | amDateFormat:'ddd D MMM'}}&lt;/span&gt;
          &lt;span class="program_shows_show_time"&gt;{{show[2]*1000 | amDateFormat:'H:mm'}} - {{show[3]*1000 | amDateFormat:'H:mm'}}&lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>When there are more than 4 items I would like to show only the first 4 items and hide the rest with a button ('Show all').</p>
  
  <p>With jQuery I would just count the items and if they're over 4 items apply a class to the <code>&lt;ul&gt;</code>. In Angular it's a bit more difficult- I know ng-repeat produces a $index variable, but I can only use that within the <code>&lt;li&gt;</code> items right? So what's the best way to apply a class on the <code>&lt;ul&gt;</code> element?</p>