fix(select): ensure the label attribute is updated in Internet Explorer

petebacondarwin · petebacondarwin · commit 16833d0fb658 · 2014-11-15T22:55:55.000Z
Only changing the `<option>` text value is not enough to trigger a render change in IE. We need to explicit update the `label` property too. Closes angular#9621 Closes angular#10042
diff --git a/src/ng/directive/select.js b/src/ng/directive/select.js
@@ -551,6 +551,7 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
                 lastElement = existingOption.element;
                 if (existingOption.label !== option.label) {
                   lastElement.text(existingOption.label = option.label);
+                  lastElement.prop('label', existingOption.label);
                 }
                 if (existingOption.id !== option.id) {
                   lastElement.val(existingOption.id = option.id);
@@ -580,6 +581,7 @@ var selectDirective = ['$compile', '$parse', function($compile,   $parse) {
                       .val(option.id)
                       .prop('selected', option.selected)
                       .attr('selected', option.selected)
+                      .prop('label', option.label)
                       .text(option.label);
                 }
 
diff --git a/test/ng/directive/selectSpec.js b/test/ng/directive/selectSpec.js
@@ -847,6 +847,23 @@ describe('select', function() {
       expect(scope.selected).toBe(scope.values[0]);
     });
 
+    // bug fix #9621
+    it('should update the label property', function() {
+      // ng-options="value.name for value in values"
+      // ng-model="selected"
+      createSingleSelect();
+
+      scope.$apply(function() {
+        scope.values = [{name: 'A'}, {name: 'B'}, {name: 'C'}];
+        scope.selected = scope.values[0];
+      });
+
+      var options = element.find('option');
+      expect(options.eq(0).prop('label')).toEqual('A');
+      expect(options.eq(1).prop('label')).toEqual('B');
+      expect(options.eq(2).prop('label')).toEqual('C');
+    });
+
     describe('binding', function() {
 
       it('should bind to scope value', function() {

Original file line number	Diff line number	Diff line change
`@@ -551,6 +551,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) {`
`551`	`551`	`lastElement = existingOption.element;`
`552`	`552`	`if (existingOption.label !== option.label) {`
`553`	`553`	`lastElement.text(existingOption.label = option.label);`
	`554`	`+ lastElement.prop('label', existingOption.label);`
`554`	`555`	`}`
`555`	`556`	`if (existingOption.id !== option.id) {`
`556`	`557`	`lastElement.val(existingOption.id = option.id);`
`@@ -580,6 +581,7 @@ var selectDirective = ['$compile', '$parse', function($compile, $parse) {`
`580`	`581`	`.val(option.id)`
`581`	`582`	`.prop('selected', option.selected)`
`582`	`583`	`.attr('selected', option.selected)`
	`584`	`+ .prop('label', option.label)`
`583`	`585`	`.text(option.label);`
`584`	`586`	`}`
`585`	`587`