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.

Answer 1

Seems like an AngularJS 1.0.3 $scope.$apply update problem. Tested your exact Fiddle in 1.0.2 (check it out yourself) and it works the way you expect it too.

It doesn't seem like there's anything wrong with your code, just that $scope.$apply(or $digest) isn't working as expected on the first select.

A very simple fix is to force the $scope to also update on every select, try changing the following line of code in your form:

<p>Favorite Beatle</p>

change it too:

<p>Favorite Beatle: {{name}}</p>

And you will see how myForm.$invalid is updated even after the first click.

I would try it out with the latest AngularJs version and let us know if that happens there too. Another solution I can think of it setting the default selected radio, which will cause myForm.$invalid to be false from the beginning. you can do this by adding the following line in your controller code:

$scope.name = "John";

or any default name you want.

Answer 2

For IONIC v1, add name="" to prevent ionic auto-generate attribute name. Then, I can change the selected item with only one click.

<ion-radio class="label-ticket" 
    ng-repeat="topic in vm.listTopic track by $index"
    ng-value="topic"
    ng-model="vm.topicSupport"
    name="">
    {{ topic.title }}
</ion-radio>