How do I set the value for a select statement?

Question

How do I set the value for a select statement?

When I select a person, I want the favoriteThing selector to display their current selection.

    <div ng-controller='MyController'>
        <select ng-model='data.selectedPerson' ng-options='person.name for person in data.people'></select>

        <span ...> likes </span>

        <select ... ng-model='data.favoriteThing' ng-options='thing.name for thing in data.things'></select>
    </div>

$scope.data.people = [{
    name: 'Tom',
    id: 1,
    favorite_thing_id: 1
}, {
    name: 'Jill',
    id: 2,
    favorite_thing_id: 3
}];

$scope.data.things = [{
    name: 'Snails',
    id: 1
}, {
    name: 'Puppies',
    id: 2
}, {
    name: 'Flowers',
    id: 3
}];

Do I need to set up a service and add watches, or is there a [good] way to use the favorite_thing_id directly in the select?

javascript
angularjs

Answer 1

Change the second select to this:

<select ng-show='data.selectedPerson' ng-model='data.selectedPerson.favorite_thing_id' 
        ng-options='thing.id as thing.name for thing in data.things'></select>

Adding the thing.id as to the ng-options will allow you to select the data.things entries based on their id's instead of their references. Changing the ng-model to data.selectedPerson.favorite_thing_id will make angular automatically change to the correct option based on selectedPerson.favorite_thing_id.

jsfiddle: http://jsfiddle.net/bmleite/4Qf63/

Answer 2

http://jsfiddle.net/4Qf63/2/ does what I want - but it's pretty unsatisfying.

$scope.$watch(function() {
    return $scope.data.selectedPerson;
}, function(newValue) {
    if (newValue) {
        $scope.data.thing = $filter('filter')($scope.data.things, {id: newValue.favorite_thing_id})[0];
    }
})

I'd like to see all of that be possible from within the select statement. Maybe I'll try to write a directive. association = {key: matchValue} So that I can do

<select ... ng-model='data.thing' ng-options='t.name for t in data.things' association='{id: "data.selectedPerson.favorite_thing_id"}'></select>