title: AngularJS shuffle and limitTo a list
body: <p>I want to use AngularJS to display a shuffled list - but only the first couple of elements. At the moment, I perform both the shuffling and limiting in the HTML template, demonstrated in <a href="http://jsfiddle.net/zc3YH/1/" rel="nofollow">this fiddle</a>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li ng-repeat="value in array | shuffle | limitTo:1"&gt;
      {{value}}
  &lt;/li&gt;
  </code></pre>
  
  <p>This works fine, but causes Angular to exceed 10 <code>$digest</code> iterations when there are more items in the list than are shown, as in the example. What is happening, as far as I can tell, is that something is watching the filtered and limited value of the list, which is highly likely to change when there all the elements will not always be displayed.</p>
  
  <p>How should I achieve this effect without breaking Angular? Of course, it still works like it should, but it's inefficient and probably an indication that what I'm doing is incorrect and should be achieved some other way.</p>
  
  <p>The obvious solution is to shuffle the list in the controller before it is ever displayed - but I do want the selection of elements displayed to change each time the user updates the view.</p>
  
  <p><strong>EDIT:</strong> here's a <a href="http://jsfiddle.net/zc3YH/7/" rel="nofollow">better example</a> of what I'm trying to achieve - the app now lets you switch between two lists, which get shuffled and limited each time.</p>