AngularJS required radio buttons needs two click events to be valid

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

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.

The reason why this is breaking - is because you're setting all radio boxes to be required. As a result, depending on how you write it - angularjs is saying it's invalid because not all have been selected at some point.

The way around this is to do something like the following:

Using checkboxes and required with AngularJS

(check the 1st and 2nd answers). This will resolve your problem.

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 />