AngularJS required radio buttons needs two click events to be valid

Question

I have a very simple form where a radio button is required to be selected in order for a form to be valid. The radio buttons are generated by ngRepeat.

As you can see from this fiddle, while the desired behavior is that when the radio button is clicked for the first time, that should validate the form (being the only element), however notice that it takes an additional click (on the same radio button or any other) to validate the form:

http://jsfiddle.net/Xsk5X/3/

What am I missing?

Answer 1

All the other solutions are work-arounds: All you have to do is remove the name attribute, when you use the ng-model attribute you don't need it and they conflict.

Specifying the name causes Angular to get confused because it changes the value once for the angular model and another time for the form element name.

Answer 2

I had this problem because a colleague had copied the radio buttons in the same page and hidden them for temporary reference, so duplicate radio inputs with the same name

Answer 3

Try adding the ng-click attribute to your radio button input.

Credit to Manny D for noting this first. Yes, this is a little hackish, but it works. E.g.,

<input type="radio" 
       name="groupName"  
       ng-model="editObject.Property"                             
       ng-value="someValue"
       ng-click />