Angular: Correctly show which radio is selected initially

Question

I have the following Plunker: http://plnkr.co/edit/5mfYvsko2cW1SS66CqJC?p=preview. When it loads initially selected will have a value of [true] but the corresponding radio will not be selected. If I uncomment out the following line:

$scope.selected = $scope.items[1].value;

then the correct radio will be shown. I get that this is a result of how Javascript handles equality comparisons with arrays. Unfortunately in my actual situation, I can't see any reasonable way to ensure that I am assigning the same object. Are there any other ways I could get the correct radio to show up as selected on the initial load?

There seems to be an error in the values of your object, please find the updated [plnkr](http://plnkr.co/edit/PAnJba6tNwesJLFg6Xo8?p=preview), have added ng-init to the label, if you want to remove that then uncomment the line 22. — Sabarish, Aug 18 '15 at 02:44
Thanks for your answer. I should have also specified I'd like to try and keep the values in their current format. Their working with some automatic forms and the less translation I have to do the better. — feus4177, Aug 18 '15 at 03:27
in that case, please remove line 22 and 23 in your plunker and replace line 27 with the below line — Sabarish, Aug 18 '15 at 03:34

score 1 · Answer 1 · answered Aug 18 '15 at 03:04

Please find the answer updated in plunker

Have modified the scope

  $scope.items = [
    {value: 'false', name: 'False'},
    {value: 'true', name: 'True'},
    {value: 'neither', name: 'False or true'}
  ];

and html

  <label ng-repeat="item in items" ng-init="selected='true'">
    <input type="radio" ng-model="selected" ng-value="item.value" >
    {{ item.name }}
  </label>

score 0 · Answer 2 · edited May 23 '17 at 12:22

Well there isn't any perfect solution but here is what I went with:

$scope.selected = {value: [true], name: 'True'};
$timeout(function () {
  $('input[type="radio"]').each(function () {
    if ($scope.selected.value.toString() === this.value) {
      this.checked = true;
    }
  });
});

I also found this answer which would be a good alternative in most cases. The plunker it references doesn't have to have the $scope.selectedOption.value as a string like it does to start with.

Angular: Correctly show which radio is selected initially

2 Answers2