How can I deselect non-selected items with an AngularJS ng-click / ng-repeat?

Question

            <div class="right">
              <a class="waves-effect waves-light btn"
                ng-repeat="answer in question.answers"
                ng-click="answer.isSelected = !answer.isSelected">
                {{ answer.letter }}
              </a>
            </div>

That's my code. I have many answers and I want the user to select one. I have that part working. The part I don't have working is I want to set the isSelected for all other answers to false . How can I accomplish this?

Keep in mind, my data is SUPER nested. So question is part of a ng-repeat="question in instructionSet.questions" and instructionSet is part of another ng-repeat and so on.

Answer 1

If there is only one element you can select, it's better to have one parameter so save the state instead of having it on every object.

<div class="right">
    <a class="waves-effect waves-light btn"
        ng-repeat="answer in question.answers"
        ng-click="$parent.question.selectedAnswer =
          $parent.question.selectedAnswer == answer ? null: answer">
        {{ answer.letter }}
    </a>
</div>

Answer 2

Pretty simple - declare a variable above the repeat scope, lets say selectedIndex and set it to -1

$scope.selectedIndex = -1;

Now set this to the selected index on click if it's not already, or back to -1 if it's already selected:

ng-click="setIndex($index)">

And the method:

$scope.setIndex = function(idx) {
    $scope.selectedIndex = $scope.selectedIndex === idx ? -1 : idx;
}