angularjs - Automatically update selected option in the angular controller to a select within a nested repeat -

i have select input want update within model selected based on rest api service.

i've created simple fiddle example illustrates issue.

first has select options inside of nested ng-repeat, selection saved in person object:

        <tr ng-repeat="person in people">             <td ng-bind="person.name"></td>             <td>                 <select ng-options="color.name color in person.availablecolors" ng-model="person.favoritecolor"></select>             </td>             <td ng-bind="person.favoritecolor.name"></td>         </tr> 

in model initialize $scope full of people each favoritecolor:

var red = new color('red', true); var orange = new color('orange', false); var pink = new color('pink', false); var blue = new color('blue', true);  var michael = new person('michael', red, [red, orange, pink]); var jack = new person('jack', orange, [orange, pink, blue]); $scope.title = 'favorite colors'; $scope.people = [michael, jack]; 

when bring page correct favoritecolor option shown in select. when change default, press reset button, view not update expected:

$scope.reset = function () {     michael.favoritecolor = red;     jack.favoritecolor = orange; }; 

my question: how automatically propogate changes in angular controller select within nested repeat?

use

ng-click='reset()' 

instead of

ng-click='reset'