AngularJS - Binding radio button selection to model inside ng-repeat

Question

I have a data model persons which takes the following form:

personsInfo = {

              name: Adam
              dob: 31-FEB-1985
              docs: [  
              {
               docType: Drivers License,
               number: 121212,
               selected: false
               id: 1
              },
              { 
               selected: true,
               docType: None
              },
              { 
               docType: State ID,
               number: 132345,
               selected: false,
               id: 2
              }
             ]
            }

In my markup I have defined the following to dynamically generate radio buttons.

<div ng-repeat="personDoc in personsInfo.docs">
  <input type="radio" name="personDocs" ng-model="personDoc.selected" value=""/>    

  {{personDoc.docType}} <span ng-hide="personDoc.docType === 'None'">Number: {{personDoc.number}}</span>
</div>

I want to be able to check the documents which have selected as true on page load, and then depending on what the user selects save the selected flag in my personsInfo model.

My intent here is to send the personsInfo model back to another page.

If somebody could point me to a working fiddle it would be greatly appreciated!

Thanks!

Answer 1

You're almost there just missing the binding to show which document is selected. We'll add an object to the scope to represent the selected item, then bind the forms to that model.

JS

app.controller('...', function($scope) {
    $scope.personInfo = { ... };
    $scope.selectedDoc = {};

    $scope.$watch('personInfo',function() {
        $scope.selectedDoc = $scope.personInfo.docs[0];
    });
});

HTML

<div ng-repeat='doc in personInfo.docs'>
    <input type='radio' ng-model='selectedDoc' value='doc' /> {{doc.docType}}
</div>

<form>
    <input type='text' ng-model='selectedDoc.number' />
    ...
</form>