javascript - An object, two select dropdowns, ng-options and value binding -

i'm trying following:

• when user select family, parent's name auto-selected in second dropdown

• when controller set object (in case of model update form example), 2 dropdowns should reflect object: family , parent should auto-selected.

see example on codepen

angular.module('app', []).controller('mainctrl', function($scope) {     $scope.families = [         { name: "my first family", parent: "parent #1" },         { name: "my second family", parent: "parent #2" },         { name: "my third family", parent: "parent #1" }     ];      $scope.importnew = function() {         $scope.model = { name: "my third family", parent: "parent #1" };         $scope.message = "problem: ^ family name isn't bind, parent!";     }      $scope.importref = function() {         $scope.model = $scope.families[2];         $scope.message = "it works!";     } }); 

<div ng-app="app" ng-controller="mainctrl">     <h1>ng-options model binding</h1>     <select ng-options="fam.name group fam.parent fam in families"             ng-model="model">         <option disabled value="">— choose —</option>     </select>     <select ng-options="fam.parent fam.parent fam in families"             ng-model="model.parent">         <option disabled value="">— choose —</option>     </select>     <button ng-click="importnew()">import family (new family object)</button>     <button ng-click="importref()">import family (referenced family object)</button>     <p><small>{{ message }}</small></p>      <p>         <strong>$scope.model :</strong>         <pre>{{ model | json }}</pre>     </p>      <p>         <strong>$scope.families :</strong>         <pre>{{ families | json }}</pre>     </p> </div> 

problem: when setting new family model, binding isn't effective.

for auto-select work, the object must part of array select dropdowns feed.

// auto-select won't work: new object, if equal existing object in list $scope.model = { name: "my third family", parent: "parent #1" }  // auto-select work: object directly 1 of dropdowns' list $scope.model = $scope.families[2]