Make radio checked by default when it has object as ng-value

Question

I have a scoped object in my controller which sets some default values in my app, like this:

  //set default values for form
  $scope.appText = {
    'size':'normal',
    'colour':'green',
    'alignment':'top',
    'dimensions':{
      'width':600,
      'height':300
    }
  };

In my view I have a series of HTML radio buttons, each with an ng-value which has an object with a width and a height, like so:

<input type="radio" name="radio-dimensions" ng-value="{width:600, height:300}" ng-model="appText.dimensions" checked>600x300

<input type="radio" name="radio-dimensions" ng-value="{width:300, height:250}" ng-model="appText.dimensions">300x250

I can't make the first radio button be checked by default, even though its ng-value matches the model.

How do I make it checked by default? I've tried adding

ng-checked="true"

which doesn't work, and I don't think is recommended. This jsfiddle illustrates the problem:

https://jsfiddle.net/yod71dm8/1/

In this jsfiddle ng-checked works. Maybe this can help you: http://stackoverflow.com/questions/14530785/angularjs-how-to-set-radio-button-checked-based-on-model — Dimitar Popov, Mar 13 '16 at 23:04
checked doesn't work in angular, you need to mention `$parent.somevariable` in ng-model to get radio button selected — user2881430, Mar 13 '16 at 23:53

score 1 · Answer 1 · answered Mar 13 '16 at 23:20

your ng-model needs to reference something that is a boolean value ie. either true or false for a radio button or checkbox.

so in your controller you would have $scope.radio1 = true

then in your view

<input type="radio" name="radio-dimensions" ng-model="radio1">600x300

dave · Accepted Answer · 2016-03-14T08:41:50.183

0

ng-checked="true" does work. My issue was that the radio buttons were inside an ng-if statement. Changing ng-if to ng-show fixed the issue.

edited Mar 14 '16 at 08:41

answered Mar 13 '16 at 23:53

dave

2,750
1
14
22

Make radio checked by default when it has object as ng-value

2 Answers2