Toggle other elements inside ng-repeat on ng-click

Question

I'm trying to apply class by using ng-class and ng-click and this working fine for selected element, but how can I toggle this class in the other elements?
Improved description :
Current behaviour :
Click on elelement, class applied.
Clik on the other element, this element also class applied.
Desired behaviour :
Click on element, class applied.
Other element - class removed.

<div ng-repeat="element in ngModel | orderBy:'Field_Order'" class='elementForm' ng-hide="element.IsDeleted">
    <div layout="row" style="width:100%" class="container" ng-mouseover="hovering=true" ng-mouseleave="hovering=false" flex ng-click="selected = !selected">
        <div class="hover-space" ng-class="{'hoveredFormElement':hovering, 'selected':selected}" flex="2" ></div>
        ....
    </div>
</div>

Answer 1

The problem is, selected is inside an isolated scope which is not shared by other items.

One easy solution using index is

 var app = angular.module('my-app', [], function() {}) app.controller('AppController', function($scope) { $scope.selected = -1; $scope.ngModel = [{ i: 1 }, { i: 2 }, { i: 3 }, { i: 4 }]; }) 

 .hoveredFormElement { color: green; } .selected { background-color: grey; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="my-app"> <div ng-controller="AppController"> {{selected}} <div ng-repeat="element in ngModel | orderBy:'Field_Order'" class='elementForm' ng-hide="element.IsDeleted"> <div layout="row" style="width:100%" class="container" ng-mouseover="hovering=true" ng-mouseleave="hovering=false" flex ng-click="$parent.selected = $parent.selected == $index ? -1 : $index"> <div class="hover-space" ng-class="{'hoveredFormElement':hovering, 'selected':selected == $index}" flex="2">{{element}}</div> </div> </div> </div> </div> 

Answer 2

Maintain flag in controller scope and use it over ng-class

$scope.selected = { index: undefined };

Markup

<div ng-repeat="element in ngModel | orderBy:'Field_Order'" class='elementForm' ng-hide="element.IsDeleted">
    <div layout="row" style="width:100%" class="container" 
      ng-mouseover="hovering = true" 
      ng-mouseleave="hovering = false" 
      flex ng-click="selected.index = !selected">
        <div class="hover-space" 
         ng-class="{'hoveredFormElement':hovering , 'selected':selected.index }" flex="2" ></div>
        ....
    </div>
</div>