ngClick for only "this" element in list | AngularJS - angularjs

Question

I have a list of users where by if the user clicks on a "edit" icon next to each person name, they have options appear.
I'm wanting to make it so that the user can only edit one person at a time and not edit lets say, two or more people at a time.
Example: If the user selects edit icon, open edit options. If user selects another persons edit icon, close current icon and show the users next selected edit options.
I'm using to toggle the views:
ng-click="editDetails = ! editDetails"
ng-class="{ 'unseen': ! editDetails }
Here is my code:
<div class="col-xs-12 col-md-6 col-md-push-6">
<div ng-show="memberNeeded" class="message">Please add hunt group members</div>
<h4>Hunt group call order</h4>
<div class="list-box">
<ul id="finalList" ng-class="{disable: details.disabled}">
<li ng-repeat="item in list" switch data-id="{{item.id}}" data-active="{{item.isActive}}" class="clearfix {{control}}">
<strong>{{item.firstName}} {{item.lastName}}</strong>
<i class="vf-i vf-i-pen pull-right" ng-click="editDetails = ! editDetails"></i>
<div class="list-panel clearfix unseen" ng-class="{ 'unseen': ! editDetails }">
<p class="pull-left">
Active
</p>
<div class="pull-left">
<div class="toggle-bg switch-toggle {{control}}">
<label class="{{control}}">{{control}}</label>
<input type="radio" name="toggle" value="off" ng-model="control" ng-click="updateUser($index, 'off')">
<input type="radio" name="toggle" value="on" ng-model="control" ng-click="updateUser($index, 'on')">
<span class="switch {{control}}"></span>
</div>
</div>
<button class="btn btn-del pull-right">Remove</button>
</div>
</li>
</ul>
</div>
</div>

Answer 1

If you only want one editor active at a time, just store the active item rather than a flag. On ng-click set the activeItem. Example below:
In your controller:
$scope.editor = {
activeEditItem: null
};
and your markup becomes:
<div class="col-xs-12 col-md-6 col-md-push-6">
<div ng-show="memberNeeded" class="message">Please add hunt group members</div>
<h4>Hunt group call order</h4>
<div class="list-box">
<ul id="finalList" ng-class="{disable: details.disabled}">
<li ng-repeat="item in list" switch data-id="{{item.id}}" data-active="{{item.isActive}}" class="clearfix {{control}}">
<strong>{{item.firstName}} {{item.lastName}}</strong>
<i class="vf-i vf-i-pen pull-right" ng-click="editor.activeEditItem === item ? editor.activeEditItem = null : editor.activeEditItem = item"></i>
<div class="list-panel clearfix unseen" ng-class="{ 'unseen': editor.activeEditItem !== item }">
<p class="pull-left">
Active
</p>
<div class="pull-left">
<div class="toggle-bg switch-toggle {{control}}">
<label class="{{control}}">{{control}}</label>
<input type="radio" name="toggle" value="off" ng-model="control" ng-click="updateUser($index, 'off')">
<input type="radio" name="toggle" value="on" ng-model="control" ng-click="updateUser($index, 'on')">
<span class="switch {{control}}"></span>
</div>
</div>
<button class="btn btn-del pull-right">Remove</button>
</div>
</li>
</ul>
</div>
</div>

Answer 2

It won't work as it will toggle all your classes.
What I would do if I were you:
In your "item" object add a variable "editActive" set it by default to false
Change your ng-class="..." by ng-show="item.editActive"
In your controller create a variable $scope.currentActive
Create a function in your controller that will be triggered by the ng-click which will get the currentActive, if there is one then set its editActive value to false. Then set the new currentActive value and set its editActive to true
It should work I think.