Indexing ng-repeat to only edit one - angularjs

Question

I am trying to index my ng-repeat so that I can edit a row by making the one with text disappear and the one with inputs appear.
<div ng-controller="BusinessGoalsCtrl">
<table class="table table-hover">
<tr>
<th>Type:</th>
<th>Timeframe:</th>
<th>Goal:</th>
<th>Edit:</th>
</tr>
<tr ng-class="editMode ? 'ng-hide' : ''" ng-repeat="details in businessGoalDetails track by $index">
<td style="width:30%;">{{details.display_name}} {{$index}}</td>
<td style="width:30%;">{{details.timeframe}}</td>
<td style="width:30%;">{{details.threshold}}</td>
<td style="width:10%;"><i ng-click="toggleEdit(true, $index)" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-class="editMode ? '' : 'ng-hide'" ng-repeat="inputs in businessGoalDetails track by $index">
<td style="width:30%;"><input ng-model="inputs.display_name"/></td>
<td style="width:30%;"><input ng-model="inputs.timeframe"/></td>
<td style="width:30%;"><input ng-model="inputs.threshold"/></td>
<td style="width:10%;"><i ng-click="toggleEdit(false, $index)" class="fa fa-check"></i></td>
</tr>
</table>
</div>
Angular Code
$scope.editMode = false;
$scope.details = 0;
$scope.toggleEdit = function (showEdit, $index) {
console.log("editing view");
$scope.editMode = showEdit;
}

Answer 1

You could probably just use ng-if/ng-show instead of ng-class and use ng-repeat-start/end instead of creating 2 different ng-repeats. Also you could just make a single row editable by setting property on its child scope or on the object under iteration. In your code you are setting the property editMode at the parent scope level and not only that it is not specific to each row.
<tr ng-show="!details.editMode" ng-repeat-start="details in businessGoalDetails track by $index">
<!-- ... -->
<td style="width:10%;"><i ng-click="details.editMode=true" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-show="details.editMode" ng-repeat-end>
<td style="width:30%;"><input ng-model="details.display_name"/></td>
<!-- ... -->
<td style="width:10%;"><i ng-click="details.editMode=false" class="fa fa-check"></i></td>
</tr>
Or
<tr ng-show="!editMode" ng-repeat-start="details in businessGoalDetails track by $index">
<!-- ... -->
<td style="width:10%;"><i ng-click="toggleEdit(true)" class="fa fa-pencil-square-o"></i></td>
</tr>
<tr ng-show="editMode" ng-repeat-end>
<td style="width:30%;"><input ng-model="details.display_name"/></td>
<!-- ... -->
<td style="width:10%;"><i ng-click="toggleEdit(false)" class="fa fa-check"></i></td>
</tr>
and
$scope.toggleEdit = function (showEdit) {
this.editMode = showEdit; //'this' here is the child scope
}