Angular Options with child

HTML

<div ng-controller="myCtrl as c">
  <label>Select Option "222" then press "click"</label><br/>
	<select name="mySelect" id="mySelect"
      ng-options="option.name for option in opts1 track by option.id"
      ng-model="mod1"></select>
  <div>
  SELECTED CHILD: {{mod1.child.name}}
  </div>
  <button ng-click="c.click1()">
  click
  </button>
  <div>
  OPTIONS: {{opts1}}
  </div>
  <br/>
  <br/>
  <br/>
  <select name="mySelect" id="mySelect"
      ng-options="option.name for option in opts2 track by option.id"
      ng-model="mod2"></select>
  <div>
  SELECTED CHILD: {{mod2.child.name}}
  </div>
  <button ng-click="c.click2()">
  click
  </button>
  <div>
  OPTIONS: {{opts2}}
  </div>
</div>

JavaScript

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

angular.module('myApp').controller('myCtrl', ['$scope', function($scope){
  $scope.opts1 = [
    {
      id: 1,
      name: "111",
      child: {
        id: 11,
        name: "111-1"
      }
    },
    {
      id: 2,
      name: "222",
      child: {
        id: 22,
        name: "222-1"
      }
    }
  ];
  
  $scope.opts2 = [
    {
      id: 1,
      name: "111",
      child: {
        id: 11,
        name: "111-1"
      }
    },
    {
      id: 2,
      name: "222",
      child: {
        id: 22,
        name: "222-1"
      }
    }
  ];
  
  this.click1 = function(){
  	$scope.opts1 = [
      {
        id: 1,
        name: "111",
        child: {
          id: 11,
          name: "111-1"
        }
      },
      {
        id: 2,
        name: "222",
        child: {
          id: 33,
          name: "333-1"
        }
      }
    ];
  }
  
  this.click2 = function(){
  	$scope.opts2 = [
      {
        id: 1,
        name: "111",
        child: {
          id: 11,
          name: "111-1"
        }
      },
      {
        id: 2,
        name: "333",
        child: {
          id: 33,
          name: "333-1"
        }
      }
    ];
  }
}]);