Объект, два выпадающих списка, ng-options и привязка значения

Я пытаюсь сделать следующее:

• Когда пользователь выбирает семейство, его родительское имя автоматически выбирается во втором раскрывающемся списке

• Когда контроллер устанавливает объект (например, в случае формы обновления модели), эти два раскрывающихся списка должны отражать этот объект: необходимо автоматически выбрать семейство и родительский элемент.

См. Этот пример на 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: ^ the family name isn't bind, only the 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 by fam.parent for fam in families"
            ng-model="model">
        <option disabled value="">— Choose —</option>
    </select>
    <select ng-options="fam.parent as fam.parent for fam in families"
            ng-model="model.parent">
        <option disabled value="">— Choose —</option>
    </select>
    <button ng-click="importNew()">Import a family (new family object)</button>
    <button ng-click="importRef()">Import a 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>

Проблема: при настройке новой модели семейства привязка не эффективна.