Have to click radio button twice for html element to change using AngularJS

Question

I have a very simple form where I have Yes and No radio buttons. Each radio button is bound to the same item in the scope (I am using AngularJS). The Yes button's value gets set to true on being selected and the No button's value gets set to false when being selected.

When I click the Yes button once, both the model and the html element changes correctly. But when I click the No radio button, the model changes correctly but the html element does not become selected. If I click the No radio button again the html element then changes to it's correct selected state.

The example below is just part of a larger html page and controller but I have kept the Angular model structure the same because this may be where the issue is.

HTML:

<div ng-app="myApp">
  <div ng-conroller="MyController">
    <div>
                <label>
                    <input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="item.isBeingPaid" value="true"/>
                    Yes
                </label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="IsBeingPaid" ng-model="item.isBeingPaid" ng-checked="!item.isBeingPaid" value="false"/>
                    No 
                </label>
                <p>{{item.isBeingPaid}}</p>
            </div>
  </div>
</div>

Controller:

var app = angular.module('myApp', [
  'my.controllers'
]);

var controllers = angular.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
    $scope.item = {};
});

I have created this fiddle to demonstrate the issue.

http://jsfiddle.net/prajna78/Tdq9n/14/

What am I missing? It seems like such a simple thing.

possible duplicate of ng-model changes of type in radio button — PM 77-1
– PM 77-1, Commented Jun 10, 2014 at 23:57

Jerrad · Accepted Answer · 2014-06-11 00:08:40Z

9

There are a few problems with your code.

First, use ng-value instead of value in your radio button elements. This makes sure that the value you're binding to is a boolean (true) and not a string ("true"). Also, you don't need ng-checked (ng-model is sufficient).

<input type="radio" name="IsBeingPaidMinimumWage" ng-model="isBeingPaidMinimumWage" ng-value="true"/>

Also, you're binding to item.isBeingPaidMinimumWage, but your $scope variable is just isBeingPaidMinimumWage, so the initial value that you assign in your controller isn't reflected in the view.

Demo

answered Jun 11, 2014 at 0:08

Jerrad

5,3001 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

prajna Over a year ago

Thanks Jerrad. The ng-value fixed it.

Collectives™ on Stack Overflow

Have to click radio button twice for html element to change using AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related