title: How to set class to first item in ng-repeat that has been sorted with orderBy?
body: <p>I have a list of items, which comes in unsorted, I use <code>orderBy</code> to sort by name alphanumerically.</p>
  
  <pre><code>&lt;li class="ticker-li"
      ng-repeat="ticker in tickers | orderBy:'ticker'"
      ng-class="{'selected':ticker.selected}"&gt;
  
      &lt;div class="ticker"
           ng-click="unselectAll(); ticker.selected = !ticker.selected;
           selectTicker(ticker);
           revealTickerOptions()"&gt;
           {{ticker.ticker}}
      &lt;/div&gt;
  </code></pre>
  
  <p>Now in my controller this is how I'm currently setting the first items selected class:</p>
  
  <pre><code>var vs = $scope;
  vs.tickers = data;
  vs.tickers[0].selected = true;
  </code></pre>
  
  <p>^ This worked perfectly until I needed to add the <code>orderBy</code> so that items appear by alpha order:</p>
  
  <p><img src="https://i.stack.imgur.com/cqwJg.png" alt="enter image description here"></p>
  
  <p>I found <a href="https://stackoverflow.com/questions/25630079/first-child-with-ng-repeat"><strong>this answer here</strong></a>, however it locks the first item to always have the class.</p>
  
  <p>Modifying my code a bit, I was able to have other buttons gain that class on click, however the <code>$first</code> item still stayed with the class.</p>
  
  <pre><code>ng-class="{'selected':$first || ticker.selected}"
  </code></pre>
  
  <p>In my controller this is my <strong>unselectAll</strong> function, which doesn't work with <code>'selected':$first</code>:</p>
  
  <pre><code>vs.unselectAll = function() {
      for (var i = 0; i &lt; vs.tickers.length; i++) {
          vs.tickers[i].selected = false;
      }
  };
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/41nQs.png" alt="enter image description here"></p>
  
  <p>How should the code either in the markup or controller need to be updated to fix this issue?</p>