How to disable button click until item selected/activated? - angularjs

Question

Trying to disable button in table. and enable it only when item selected/clicked/activated
button code
<td><a class="btn btn-info" ng-disabled="isDisabled">Edit</a></td>
disabled bool
$scope.isDisabled = false;
trying to enable button only when selected is true
$scope.selectedRow = false; // initialize our variable to null
$scope.setClickedRow = function(index) { //function that sets the value of selectedRow to current index
$scope.selectedRow = index;
$scope.isDisabled = true;
}
any help please?
http://plnkr.co/edit/llmcbXCA93kuTVTzpQlm?p=catalogue
the full table
<thead>
<tr>
<th class="hidden-xs">ID</th>
<th>Name</th>
<th>Date</th>
<th>Grade</th>
<th>Subject</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="trainee in trainees | filter: search" ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
<td class="hidden-xs">{{$index+1}}</td>
<td>{{trainee.name}}</td>
<td>{{trainee.date | date:'d/M/yyyy'}}</td>
<td>{{trainee.grade}}</td>
<td>{{trainee.subject}}</td>
<td><a class="btn btn-info">Edit</a></td>
</tr>
</tbody>
</table>

Answer 1

First make the plunk work!
You were referencing a file that didn't exist in the plunk, so had to change:
<script src="main.js"></script> to <script src="script.js"></script>.
Amend your ng-disabled directive:
Also had to add ng-disabled="selectedRow !== $index" on your link button:
<td><a class="btn btn-info" ng-disabled="selectedRow !== $index">Edit</a></td>
I don't think you need the $scope.disabled variable as the $scope.selectedRow along with $index takes care of enabling/disabling each edit button.
Prevent click events from bubbling up the DOM tree:
The ng-click on your tr tag will be triggered by any ng-click that you place on your edit link button, to fix that you have to add $event.stopPropagation(); after any function that you put there:
<a class="btn btn-info"
ng-disabled="selectedRow === $index"
ng-click="onEditButtonClicked(); $event.stopPropagation();">
Edit
</a>
Fix Invalid HTML Markup:
Moved the following up and out of the table:
<div class="form-inline">
<input class="form-control" type="text" placeholder="Search" ng-model="search">
<a type="button" href="#add-form" class="btn btn-info" ng-click="addForm()">Add new trainee</a>
<button class="btn btn-danger" ng-click="removeTrainee(trainee)">Remove</button>
</div>
Styles.css 404 not Found:
Last but not least styles.css doesn't exist and gets a 404 not found, and so the following can be removed: <link rel="stylesheet" href="styles.css">
Working Plunk