fix(select): update option if interpolated value attribute changes

Previously, the option would only update if the fallback
(the interpolated option text) was used. Now the value attribute will
be observed if it contains an interpolation.

Closes #12005

Author: Narretz

src/ng/directive/select.js

@@ -270,9 +270,12 @@ var optionDirective = ['$interpolate', function($interpolate) {
     priority: 100,
     compile: function(element, attr) {
 
-      // If the value attribute is not defined then we fall back to the
-      // text content of the option element, which may be interpolated
-      if (isUndefined(attr.value)) {
+      if (isDefined(attr.value)) {
+        // If the value attribute is defined, check if it contains an interpolation
+        var valueInterpolated = $interpolate(attr.value, true);
+      } else {
+        // If the value attribute is not defined then we fall back to the
+        // text content of the option element, which may be interpolated
         var interpolateFn = $interpolate(element.text(), true);
         if (!interpolateFn) {
           attr.$set('value', element.text());
@@ -288,24 +291,38 @@ var optionDirective = ['$interpolate', function($interpolate) {
             selectCtrl = parent.data(selectCtrlName) ||
               parent.parent().data(selectCtrlName); // in case we are in optgroup
 
+        function addOption(optionValue) {
+          selectCtrl.addOption(optionValue, element);
+          selectCtrl.ngModelCtrl.$render();
+          chromeHack(element);
+        }
+
         // Only update trigger option updates if this is an option within a `select`
         // that also has `ngModel` attached
         if (selectCtrl && selectCtrl.ngModelCtrl) {
 
-          if (interpolateFn) {
+          if (valueInterpolated) {
+            // The value attribute is interpolated
+            var oldVal;
+            attr.$observe('value', function valueAttributeObserveAction(newVal) {
+              if (oldVal && oldVal !== newVal) {
+                selectCtrl.removeOption(oldVal);
+              }
+              oldVal = newVal;
+              addOption(newVal);
+            });
+          } else if (interpolateFn) {
+            // The text content is interpolated
             scope.$watch(interpolateFn, function interpolateWatchAction(newVal, oldVal) {
               attr.$set('value', newVal);
               if (oldVal !== newVal) {
                 selectCtrl.removeOption(oldVal);
               }
-              selectCtrl.addOption(newVal, element);
-              selectCtrl.ngModelCtrl.$render();
-              chromeHack(element);
+              addOption(newVal);
             });
           } else {
-            selectCtrl.addOption(attr.value, element);
-            selectCtrl.ngModelCtrl.$render();
-            chromeHack(element);
+            // Either the value attribute or the text content is static
+            addOption(attr.value);
           }
 
           element.on('$destroy', function() {

test/ng/directive/selectSpec.js

@@ -964,22 +964,79 @@ describe('select', function() {
 
   describe('option', function() {
 
-    it('should populate value attribute on OPTION', function() {
+    it('should populate a missing value attribute with the option text', function() {
       compile('<select ng-model="x"><option selected>abc</option></select>');
       expect(element).toEqualSelect([unknownValue(undefined)], 'abc');
     });
 
-    it('should ignore value if already exists', function() {
+
+    it('should ignore the option text if the value attribute exists', function() {
       compile('<select ng-model="x"><option value="abc">xyz</option></select>');
       expect(element).toEqualSelect([unknownValue(undefined)], 'abc');
     });
 
+
     it('should set value even if self closing HTML', function() {
       scope.x = 'hello';
       compile('<select ng-model="x"><option>hello</select>');
       expect(element).toEqualSelect(['hello']);
     });
 
+
+    it('should add options with interpolated value attributes',
+      inject(function($rootScope, $compile) {
+        var scope = $rootScope;
+
+        scope.option1 = 'option1';
+        scope.option2 = 'option2';
+
+        var element = $compile(
+          '<select ng-model="selected">' +
+            '<option value="{{option1}}">Option 1</option>' +
+            '<option value="{{option2}}">Option 2</option>' +
+          '</div>')(scope);
+
+        scope.$digest();
+        expect(scope.selected).toBeUndefined();
+
+        browserTrigger(element.find('option').eq(0));
+        expect(scope.selected).toBe('option1');
+
+        scope.selected = 'option2';
+        scope.$digest();
+        expect(element.find('option').eq(1).prop('selected')).toBe(true);
+        expect(element.find('option').eq(1).text()).toBe('Option 2');
+      })
+    );
+
+
+    it('should update the option when the interpolated value attribute changes',
+      inject(function($rootScope, $compile) {
+        var scope = $rootScope;
+
+        scope.option1 = 'option1';
+        scope.option2 = 'option2';
+
+        var element = $compile(
+          '<select ng-model="selected">' +
+            '<option value="{{option1}}">Option 1</option>' +
+            '<option value="{{option2}}">Option 2</option>' +
+          '</div>')(scope);
+
+        scope.$digest();
+        expect(scope.selected).toBeUndefined();
+
+        //Change value of option2
+        scope.option2 = 'option2Changed';
+
+        scope.selected = 'option2Changed';
+        scope.$digest();
+        expect(element.find('option').eq(1).prop('selected')).toBe(true);
+        expect(element.find('option').eq(1).text()).toBe('Option 2');
+      })
+    );
+
+
     it('should not blow up when option directive is found inside of a datalist',
         inject(function($compile, $rootScope) {
       var element = $compile('<div>' +
@@ -993,6 +1050,7 @@ describe('select', function() {
       dealoc(element);
     }));
 
+
     it('should throw an exception if an option value interpolates to "hasOwnProperty"', function() {
       scope.hasOwnPropertyOption = "hasOwnProperty";
       expect(function() {