【AngularJS】selectとinputの相互バインド？

AngularJSを学習中の者です。

セレクトボックスからオブジェクトを選択し、オブジェクトの内容を編集できるようなものを作ろうとしています。以下のようにコードを書きましたが、どうしてもうまくいかないので質問いたします。

selectを選択すると、inputにobjのnameが表示されるのですが、inputを編集してもselect要素の表示が変更されません。$scope.objectsと$scope.selectedObjectsを表示してみると、$scope.selectedObjectsのオブジェクトを変更したときに、$scope.objectsのオブジェクトが更新されていないので、これが原因かと思うのですが、どう解決したらいいのか分かりません。オブジェクトの参照が壊れているのでしょうか？

なぜか、$scope.addObject()した直後のオブジェクトは、ちゃんとinputからselect要素に変更が伝わります。しかし、あらためてクリックして選択しなおすと、結局変更が伝わらない状態になってしまいます。ここもよく分からないところです。

html
1<h3>オブジェクト一覧</h3>
2<select
3  ng-model="selectedObjects.values"
4  ng-options="obj as obj.name for obj in objects track by obj.id"
5  multiple>
6</select>
7<button
8  type="button"
9  ng-click="addObject()">
10  オブジェクトを追加
11</button>
12
13<h3>選択中のオブジェクト</h3>
14<label>名前</label>
15<input ng-model="selectedObjects.values[0].name">

js
1$scope.objects = [];
2$scope.selectedObjects = [];
3$scope.addObject = function() {
4    var newObject = {
5        id: Date.now().toString(),
6        name: 'NewObject',
7    };
8    $scope.objects.push(newObject);
9    $scope.selectedObjects.values.length = 0;
10    $scope.selectedObjects.values.push(newObject);
11};

よろしくお願いいたします。

環境

AngularJS v1.5.8
Google Chrome

行動規範の内容に同意します

回答1件

ベストアンサー

trackを使用するとvalueの値が変わってしまうためできないようです。
idを何かしらに使用したい場合はtrackは使用せず、改めて$scope.objectsからidだけ抜き出す処理を追加する形にしてはいかがでしょうか。

サンプル

html
1<html>
2 <head>
3  <link rel="stylesheet" href="style.css">
4  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>  
5  
6  <script>
7    angular.module('App', []).controller('TestController', function($scope) {
8      $scope.objects = [];
9      $scope.selectedObject = null;
10      $scope.addObject = function() {
11        $scope.objects.push({id: Date.now().toString(),name: 'NewObject'});
12      };
13    });
14    
15  </script>
16 </head>
17 <body ng-app="App">
18  <div ng-controller="TestController">
19    <h3>オブジェクト一覧</h3>
20    <select ng-model="selectedObject" ng-options="obj as obj.name for obj in objects" multiple></select>
21    <button type="button" ng-click="addObject()">オブジェクトを追加</button>
22    <h3>選択中のオブジェクト</h3>
23    <label>名前</label>
24    <input ng-model="selectedObject[0].name">
25  </div>
26 </body>
27</html>