I have a set of <li> elements.

<ul>
  <li ng-class="{current: selected == 100}">
     <a href ng:click="selected=100">ABC</a>
  </li>
  <li ng-class="{current: selected == 101}">
     <a href ng:click="selected=101">DEF</a>
  </li>
  <li ng-class="{current: selected == $index }" 
      ng-repeat="x in [4,5,6,7]">
     <a href ng:click="selected=$index">A{{$index}}</a>
  </li>
</ul>

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 <DIV> elements below:

<div  ng:show="selected == 100">100</div>
<div  ng:show="selected == 101">101</div>
<div ng-repeat="x in [4,5,6,7]" ng:show="selected == $index">{{ $index }}</div>

This works for the first two cases.

  • When the user clicks ABC then the first <DIV> shows 100 and changes color to red.
  • When DEF is clicked then 101 shows and DEF changes to red.

However it does not work at all for A0, A1, A2 and A3

  • 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.

This is best shown if you look at this Plunker:

http://plnkr.co/edit/7HMeObplaBkx5R0SntjY?p=preview

Note that at the top I have added {{ selected }} as a debug aid at the top. Also the x in [4,5,6,7] are just meant to simulate a loop. In real life I have this as ng-repeat="answer in modal.data.answers".

Does anyone know how I can set this up so that the li class current is set at the right time and the DIV shows at the right time for t

angularjs
Edit
Report