Angularjs input radio and ng-repeat issue

Question

Okay so here is my setup i have the following array:

answers = [answer1, answer2]

with these i do the following:

    <form>
<div class="col-xs-12" ng-repeat="answer in component.question.answers">
    <div class="col-xs-1" style="width: 1%">
        <div class="radio">
            <label class="i-checks">
                <input type="radio" name="a" ng-model="answer.is_correct">
                <i></i>
            </label>
        </div>
    </div>
    <div class="col-xs-11">
        <input type="text"  ng-model="answer.answer" class="form-control" placeholder="Svar">
    </div>
</div>
</form>

Now the input[radio] are inside the same form as they should. My goal is that when i set one as selected both of the answer objects should be updated so that only one of the object has the value is_correct = true

However what happens right now is that if i click the first and then second both values have is_correct = true

So what can i do?

Answer 1

Radio buttons are used to choose between different values for a single field or, in Angular's case, a single model. The logical solution would be to select the correct answer:

<input type="radio" ng-model="component.question.correctAnswer" ng-value="answer">

If you really need to set a flag you can easily achieve that with a watcher:

$scope.$watch('component.question.correctAnswer', function(correctAnswer) {
  component.question.answers.forEach(function(answer) {
    answer.is_correct = answer === correctAnswer ? true : false;
  });
});