AngularJS problems with radio button not selecting

Question

I'm trying to catch the ng-change event on a radio button, but the problem is that it only gets checked when I click for second time on any of the radios in the same group. Also, when I click on a radio for first time, ng-changed gets called, but it doesn't if I click again in another radio button or in the same one.

<div>
<div ng-repeat="element in questions" ng-class="{'in':$first,'hidden': !$first}">
    <h1>{{element.question}}</h1>
    <div>
        <input type="radio" name="answer" ng-value="A" ng-model="$parent.answer" ng-change="enableSubmit()">{{element.answerA}}</input>
        <input type="radio" name="answer" ng-value="B" ng-model="$parent.answer" ng-change="enableSubmit()">{{element.answerB}}</input>
        <input type="radio" name="answer" ng-value="C" ng-model="$parent.answer" ng-change="enableSubmit()">{{element.answerC}}</input>
    </div>
</div>
<button id="prev" class="hidden" ng-click="prevQuestion()">Anterior</button>
<button id="next" ng-click="nextQuestion()" disabled>Siguiente</button>
</div>

What could be wrong with this? Thanks in advance.

First, `input` tag is a *self-closing* tag, then your HTML is semantically incorrect. — developer033, Jul 10 '16 at 20:51
You could provide a simple demo in plnkr to demonstrate how is your JS controller and complete view.. it's hard to tell something this way.. — developer033, Jul 11 '16 at 16:26

score 1 · Accepted Answer · edited May 23 '17 at 11:44

Since ng-repeat creates its own $scope, as you can see in this answer, you must use, preferably, controller-as-syntax to achieve what you want.

A demo working with your code:

DEMO

Note: I don't know if you're using jQuery for something else besides hide/disable buttons, but all that things can be easily done with Angular, like this:

<input type="radio" ng-model="main.answer" value="A" ng-change="enableSubmit()" />

$scope.enableSubmit = function() {
    $('#next').prop('disabled', false);
};

Should be just this in view:

<button ng-disabled="!main.answer" id="next" ng-click="nextQuestion()">Siguiente</button>

I hope it helps!

You're welcome, can you check the answer as correct? Just clicking on the left <===== — developer033, Jul 11 '16 at 18:50

AngularJS problems with radio button not selecting

1 Answers1