How to pre-select radio radio button with Angular JS which is bound to model within ng-repeat

Question

I have the following HTML:

<div ng-controller="CreateSpreadsheetCtrl as csCtrl" ng-init="csCtrl.init()">
    <div ng-repeat="x in csCtrl.ProcessingTypeMasters">
        <input type="radio" name="proctype" 
               ng-model="$parent.csCtrl.Template.ProcessingTypeMaster"
               ng-value="x" /> {{x.LocalizedName}}
    </div>
</div>

Inside the CreateSpreadsheetCtrl.init(), we are loading an array called "ProcessingTypeMasters" (csCtrl.ProcessingTypeMasters) which contains a list of objects (eg {Id:1, Name: "Type 1" }, {Id:2, Name: "Type 2" }).

Also in the init() method, we load this "csCtrl.Template" object, which has a property inside it called "ProcessingTypeMaster" (csCtrl.Template.ProcessingTypeMaster).

With the above code, it binds correctly to the model and when you change the selection csCtrl.Template.ProcessingTypeMaster is bound correctly.

However, when csCtrl.Template.ProcessingTypeMaster is pre-loaded with an existing object, it doesn't select it in the UI when the page initially loads.

Any ideas on what we are missing here?

Answer 1

when csCtrl.Template.ProcessingTypeMaster is pre-loaded with an existing object, it doesn't select it in the UI when the page initially loads.

The model value must be a reference to the exact object that appears in the collection - a copy won't work.

Example using an object not in the collection (won't work)

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script> var myApp = angular.module('myApp', []); myApp.controller('CreateSpreadsheetCtrl', [MyCtrl]); function MyCtrl() { var vm = this; vm.ProcessingTypeMasters = [{ id: 0, LocalizedName: 'Option 0' }, { id: 1, LocalizedName: 'Option 1' }, { id: 2, LocalizedName: 'Option 2' }]; vm.Template = { //This is a different object - it doesn't exist in the collection! ProcessingTypeMaster: { id: 1, LocalizedName: 'Option 1' } } } </script> <div ng-app="myApp"> <div ng-controller="CreateSpreadsheetCtrl as csCtrl" ng-init="csCtrl.init()"> Model value: {{csCtrl.Template.ProcessingTypeMaster}} <div ng-repeat="x in csCtrl.ProcessingTypeMasters"> <input type="radio" name="proctype" ng-model="$parent.csCtrl.Template.ProcessingTypeMaster" ng-value="x" />{{x.LocalizedName}} </div> </div> </div> 

Example using an object directly from the collection

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script> var myApp = angular.module('myApp', []); myApp.controller('CreateSpreadsheetCtrl', [MyCtrl]); function MyCtrl() { var vm = this; vm.ProcessingTypeMasters = [{ id: 0, LocalizedName: 'Option 0' }, { id: 1, LocalizedName: 'Option 1' }, { id: 2, LocalizedName: 'Option 2' }]; vm.Template = { //Now we're using a reference to an object in the collection ProcessingTypeMaster: vm.ProcessingTypeMasters[1] } } </script> <div ng-app="myApp"> <div ng-controller="CreateSpreadsheetCtrl as csCtrl" ng-init="csCtrl.init()"> Model value: {{csCtrl.Template.ProcessingTypeMaster}} <div ng-repeat="x in csCtrl.ProcessingTypeMasters"> <input type="radio" name="proctype" ng-model="$parent.csCtrl.Template.ProcessingTypeMaster" ng-value="x" />{{x.LocalizedName}} </div> </div> </div>