How can I use the $index inside a ng-repeat to enable a class and show a DIV?

Question

I have a set of `

` elements. ```

``` 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 `

` elements below: ```

100

101

``` This works for the first two cases. - When the user clicks ABC then the first `

` 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 v…

Accepted Answer

The issue here is that `ng-repeat` creates its own scope, so when you do `selected=$index` it creates a new a `selected` property in that scope rather than altering the existing one. To fix this you have two options: Change the selected property to a non-primitive (ie object or array, which makes javascript look up the prototype chain) then set a value on that: ``` $scope.selected = {value: 0}; A{{$index}} ``` See plunker or Use the `$parent` variable to access the correct property. Though less recommended as it increases coupling between scopes ``` A{{$index}} ``` See plunker

How can I use the $index inside a ng-repeat to enable a class and show a DIV?

Solution

Problem