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 bee 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.

/

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

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 bee 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/prajna78/Tdq9n/14/

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

• javascript
• html
• angularjs

• 1 possible duplicate of ng-model changes of type in radio button – PM 77-1 Commented Jun 10, 2014 at 23:57
• jsfiddle/Tdq9n/15 – PM 77-1 Commented Jun 10, 2014 at 23:58

1 Answer 1

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