Angular multiple level binding

A fiddle to fork for doing AngularJS Fiddles. Version 1.0.5

by Michael Hedgpeth

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<div ng-controller="AppCtrl">
    <h1>{{title}}</h1>
    <table>
        <thead>
            <th>Person</th>
            <th>Select</th>
            <th>Favorite</th>
        </thead>
        <tbody>
            <tr ng-repeat="person in people">
                <td ng-bind="person.name"></td>
                <td>
                    <select ng-options="color.name for color in person.availableColors"
                            ng-model="person.favoriteColor">
                    </select>
                </td>
                <td ng-bind="person.favoriteColor.name"></td>
            </tr>
        </tbody>
    </table>
    <button ng-click='reset'>Reset</button
    
</div>

JavaScript

var app = angular.module('app',[]);

function Color(name, isSimple) {
  this.name = name;
    this.isSimple = isSimple;
}

function Person (name, favoriteColor, availableColors) {
    this.name = name;
    this.favoriteColor = favoriteColor;
    this.availableColors = availableColors;
}
app.controller('AppCtrl', ['$scope', function($scope) {
    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];
    $scope.reset = function() {
        michael.favoriteColor = red;
        jack.favoriteColor = orange;
    };
}]);