fix(ngOptions): fix model<->option interaction when using track by

Closes angular#10869

Author: petebacondarwin

src/ng/directive/ngOptions.js

@@ -307,6 +307,9 @@ var ngOptionsDirective = ['$compile', '$parse', function($compile, $parse) {
           selectValueMap: selectValueMap,
           getOptionFromViewValue: function(value) {
             return selectValueMap[getTrackByValue(value, getLocals(value))];
+          },
+          getViewValueFromOption: function(option) {
+            return trackBy ? angular.copy(option.viewValue) : option.viewValue;
           }
         };
       }
@@ -400,7 +403,7 @@ var ngOptionsDirective = ['$compile', '$parse', function($compile, $parse) {
         if (selectedOption) {
           removeEmptyOption();
           removeUnknownOption();
-          return selectedOption.viewValue;
+          return options.getViewValueFromOption(selectedOption);
         }
         return null;
       };
@@ -432,7 +435,7 @@ var ngOptionsDirective = ['$compile', '$parse', function($compile, $parse) {
           var selectedValues = selectElement.val() || [];
           return selectedValues.map(function(selectedKey) {
             var option = options.selectValueMap[selectedKey];
-            return option.viewValue;
+            return options.getViewValueFromOption(option);
           });
         };
       }
@@ -460,6 +463,7 @@ var ngOptionsDirective = ['$compile', '$parse', function($compile, $parse) {
 
       // We will re-render the option elements if the option values or labels change
       scope.$watchCollection(ngOptions.getWatchables, updateOptions);
+      scope.$watch(attr.ngModel, function() { ngModelCtrl.$render(); }, true);
 
       // ------------------------------------------------------------------ //
 

test/ng/directive/ngOptionsSpec.js

@@ -656,7 +656,74 @@ describe('ngOptions', function() {
       expect(options.eq(2)).toEqualTrackedOption(20, 'twenty');
     });
 
-    
+
+    it('should update the selected item when only the properties on the object change (single)', function() {
+      createSelect({
+        'ng-model': 'selected',
+        'ng-options': 'item.label for item in arr track by item.id'
+      });
+
+      scope.$apply(function() {
+        scope.selected = {id: 10, label: 'new ten'};
+      });
+
+      expect(element.val()).toBe('10');
+
+      // Update the properties on the
+      scope.$apply(function() {
+        scope.selected.id = 20;
+        scope.selected.label = 'new twenty';
+      });
+
+      expect(element.val()).toBe('20');
+    });
+
+
+    it('should update the selected item when only the properties on the object change (multi)', function() {
+      createSelect({
+        'ng-model': 'selected',
+        'multiple': true,
+        'ng-options': 'item.label for item in arr track by item.id'
+      });
+
+      scope.$apply(function() {
+        scope.selected = [{id: 10, label: 'new ten'}];
+      });
+
+      expect(element.val()).toEqual(['10']);
+
+      // Update the properties on the
+      scope.$apply(function() {
+        scope.selected[0].id = 20;
+        scope.selected[0].label = 'new twenty';
+      });
+
+      expect(element.val()).toEqual(['20']);
+    });
+
+
+    it('should prevent changes to the selected object from modifying the options objects (single)', function() {
+
+      createSelect({
+        'ng-model': 'selected',
+        'ng-options': 'item.label for item in arr track by item.id'
+      });
+
+      element.val('10');
+      browserTrigger(element, 'change');
+
+      expect(scope.selected).toEqual(scope.arr[0]);
+
+      scope.$apply(function() {
+        scope.selected.id = 20;
+      });
+
+      expect(scope.selected).not.toEqual(scope.arr[0]);
+      expect(element.val()).toEqual('20');
+      expect(scope.arr).toEqual([{id: 10, label: 'ten'}, {id:20, label: 'twenty'}]);
+    });
+
+
     it('should preserve value even when reference has changed (single&array)', function() {
       createSelect({
         'ng-model': 'selected',
@@ -719,7 +786,7 @@ describe('ngOptions', function() {
       expect(element.val()).toBe('10');
 
       setSelectValue(element, 1);
-      expect(scope.selected).toBe(scope.obj['2']);
+      expect(scope.selected).toEqual(scope.obj['2']);
     });
 
 
@@ -798,7 +865,7 @@ describe('ngOptions', function() {
 
       element.val('10');
       browserTrigger(element, 'change');
-      expect(scope.selected).toBe(scope.arr[0].subItem);
+      expect(scope.selected).toEqual(scope.arr[0].subItem);
 
       // Now reload the array
       scope.$apply(function() {
@@ -1352,7 +1419,7 @@ describe('ngOptions', function() {
         scope.values.pop();
       });
 
-      expect(element.val()).toEqualUnknownValue();
+      expect(element.val()).toEqual('');
       expect(scope.selected).toEqual(null);
 
       // Check after model change
@@ -1366,7 +1433,7 @@ describe('ngOptions', function() {
         scope.values.pop();
       });
 
-      expect(element.val()).toEqualUnknownValue();
+      expect(element.val()).toEqual('');
       expect(scope.selected).toEqual(null);
     });