ng-options select list value set to the id of my choice and binding it correctly with ng-model

Question

With angular I would like to make a select list with value that takes the id of my choice (actual id property of an object) and I would like to bind it correctly with ng-model directive.

Here is what I've tried :

<select ng-model="selectedPersonId"                 
ng-options="p.id as p.name for p in People track by p.id"></select>

$scope.People = [
    { name : "Fred", id : 1 },
    { name : "Joe", id : 2 },
    { name : "Sandra", id : 3 },
    { name : "Kacey", id : 4 },
    { name : "Bart", id : 5 }
];

$scope.setTo1 = function(){
    $scope.selectedPersonId = 1;
}

http://jsfiddle.net/b7dyadnr/

Here select option value is the correct value (value is the id of person in people) and text is correct. But the binding doesn't work so if I set the value of $scope.selectedPersonId the selection is not reflected on the list.

I know I can make it work like this :

<select ng-model="selectedPersonId"                 
ng-options="p.id as p.name for p in People"></select>

http://jsfiddle.net/rgtbn2f5/

There it works I can set $scope.selectedPersonId and the changes are reflected on the list. But then the id used in the select list option value is not the id of the actual person !

<option value="0">Fred</option> <!--option value is 0 which is not the true id of fred -->
<option value="1" selected="selected">Joe</option>
...

I want to use it like this except that I want angular to use the true id of the person in the select option value and not the index of the array or whatever thing it uses.

If you wonder why I want to use it like this it is because the id is sent to an API and the model can also be set using querystring so I must make it work like this.

Answer 1

Had the same issue while back. And it appears that p.id will only work in one place either in select or in trackexpr . The only way it worked for me (value was set to id ) was like this:

<select 
ng-model="selectedPerson"                 
ng-options="p as p.name for p in People track by p.id"></select>

Though the code for selecting person with id = 1 would look pretty ugly:

$scope.setTo1 = function () {
    $scope.selectedPerson = $scope.People.filter(function (item) {
        return item.id == 1
    })[0];
}

Here is jsfiddle .

This is because you have to assign ng-model the same item you have in ng-options collection since they are compared by reference. This is from angular documentation :

Note: ngModel compares by reference, not value. This is important when binding to an array of objects. See an example in this jsfiddle .

So I gave up eventually and let Angular to set option value to whatever it needs since it would allow me to make assignemnet as simeple as: $scope.selectedPersonId = 1