Angular Select playground

by hhcofcmds

HTML

<body ng-app="mainModule">
    <div ng-controller="mainController">
        <select ng-model="model" ng-options="model.name for model in models"></select>
        <select ng-model="model.person" ng-options="person.name for person in model.personArray">
        </select>
        <p>Selected: {{model.person.name}}</p>
    </div>
</body>

JavaScript

angular.module("mainModule", [])
.controller("mainController", function ($scope) {
    var model1 = {
        name: "model1",
        personArray : [{name: "John1"},{name: "Jack1" }]
    };
    var model2 = {
            name: "model2",
        personArray : [{name: "John2"},{name: "Jack2" }]
    };
    model1.person = model1.personArray[0];
    model2.person = model2.personArray[1];
    $scope.models = [model1, model2];
    $scope.model = model1;
    $scope.xx = "hello world";
});