Angular.js: Using ng-model for dropdowns within ng-repeat

Question

I\'m having a hard time understanding how to use ng-model within ng-repeat. In this context, CargoItems is a list of objects that have a LoadPoint on them. LoadPoint has Id and

Answer 1

1. Bind to the entire object reference instead of using the 'Id' property (loadPoint.Id). To do that, just change the ng-options and remove the loadPoint.Id as part:

   <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Text for loadPoint in LoadPoints"></select>
   

2. If you use the above approach and the correct reference to the LoadPoints object, Angular will do that for you automatically. Here's an example on how to use a direct LoadPoints object reference:

   $scope.LoadPoints = [{ Id: '1', Text: 'loadPointA' },{ Id: '2', Text: 'loadPointB' }];        
   $scope.cargo = {
       CargoItems: [{
           LoadPoint: $scope.LoadPoints[0]
       }, {
           LoadPoint: $scope.LoadPoints[1]
       }]
   };
   

   Using this approach, cargoItem.LoadPoint (the ngModel) will always hold a reference to the entire LoadPoints object (i.e. { Id: '1', Text: 'loadPointA' }), and not only its Id (i.e. '1').

jsFiddle: http://jsfiddle.net/bmleite/baRb5/