title: How can I use the $index inside a ng-repeat to enable a class and show a DIV?
body: <p>I have a set of <code>&lt;li&gt;</code> elements.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-class="{current: selected == 100}"&gt;
       &lt;a href ng:click="selected=100"&gt;ABC&lt;/a&gt;
    &lt;/li&gt;
    &lt;li ng-class="{current: selected == 101}"&gt;
       &lt;a href ng:click="selected=101"&gt;DEF&lt;/a&gt;
    &lt;/li&gt;
    &lt;li ng-class="{current: selected == $index }" 
        ng-repeat="x in [4,5,6,7]"&gt;
       &lt;a href ng:click="selected=$index"&gt;A{{$index}}&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>When a user clicks on one of the address elements above then then it should, set the value of selected and show one of the <code>&lt;DIV&gt;</code> elements below:</p>
  
  <pre><code>&lt;div  ng:show="selected == 100"&gt;100&lt;/div&gt;
  &lt;div  ng:show="selected == 101"&gt;101&lt;/div&gt;
  &lt;div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index"&gt;{{ $index }}&lt;/div&gt;
  </code></pre>
  
  <p>This works for the first two cases. </p>
  
  <ul>
  <li>When the user clicks ABC then the first <code>&lt;DIV&gt;</code> shows 100 and changes color to red. </li>
  <li>When DEF is clicked then 101 shows and DEF changes to red. </li>
  </ul>
  
  <p>However it does not work at all for A0, A1, A2 and A3</p>
  
  <ul>
  <li>When a user clicks A0, A1, A2 or A3 then the correct  does not show, the selected value is not set and the color of ALL the ng-repeat A0,A1,A2 and A3 turn to red.</li>
  </ul>
  
  <p>This is best shown if you look at this Plunker:</p>
  
  <p><a href="http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview">http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview</a></p>
  
  <p>Note that at the top I have added <code>{{ selected }}</code> as a debug aid at the top. Also the <code>x in [4,5,6,7]</code> are just meant to simulate a loop. In real life I have this as <code>ng-repeat="answer in modal.data.answers"</code>.</p>
  
  <p>Does anyone know how I can set this up so that the <code>li</code> class current is set at the right time and the <code>DIV</code> shows at the right time for the A0, A1, A2 and A3 <code>&lt;li&gt;</code> and <code>&lt;DIV&gt;</code></p>