AngularJs styling a single clicked element within an ng-repeat

Question

I have a collapsible accordion using ng-repeat to render its options. On the right there is a downward facing glyphicon. This glyphicon should become upward facing once the job is clicked and expanded.

Update: Using Amine's response, the clicked header gets a glyphicon-down as it should be. But when collapsed and clicked outside, the glyphicon stays downward as the index is set and actually needs to become upward facing again when collapsed. How can I set $index to undefined again when the item is clicked again?

My code:

<div class="col span_2_of_3">
        <div ng-repeat="item in jobs">
            <accordion>
                <accordion-group ng-click="state.selected = $index">
                    <accordion-heading>
                        <h2>
                            "{{item.title}}"
                            <i class="pull-right glyphicon "
    ng-class="{'glyphicon-chevron-up': $index == state.selected,
          'glyphicon-chevron-down': $index != state.selected }"
                            ng-click="state.selected = $index"
                            ></i>
                        </h2>
                    </accordion-heading>
                    {{item.description}}
                </accordion-group>
            </accordion>
        </div>
    </div>

In my controller I have:

$scope.state = { selected: undefined };

Answer 1

You're not removing the glyphicon-chevron-down class when you click on the element. You end up with an element that has both classes ; whatever CSS rule comes last will be applied.

Try this :

<i class="pull-right glyphicon " 
   ng-class="{'glyphicon-chevron-up': $index == state.selected,
              'glyphicon-chevron-down': $index != state.selected }"></i>

Here is a fiddle showing a solution (note that I have removed the ng-click binding on the icon as that's already handled by the accordion-group).