From 7a2ce7ff21546f015b43741945009e4dc4033c80 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Mon, 23 May 2016 18:43:32 -0700
Subject: [PATCH] fix(forms): update accessor value when native select value
 changes

Closes #8710
---
 .../select_control_value_accessor.ts          |  5 ++-
 .../common/test/forms/integration_spec.ts     | 35 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts b/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts
index a2a1ea4ade..fa93144ee7 100644
--- a/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts
+++ b/modules/@angular/common/src/forms/directives/select_control_value_accessor.ts
@@ -68,7 +68,10 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
   }
 
   registerOnChange(fn: (value: any) => any): void {
-    this.onChange = (valueString: string) => { fn(this._getOptionValue(valueString)); };
+    this.onChange = (valueString: string) => {
+      this.value = valueString;
+      fn(this._getOptionValue(valueString));
+    };
   }
   registerOnTouched(fn: () => any): void { this.onTouched = fn; }
 
diff --git a/modules/@angular/common/test/forms/integration_spec.ts b/modules/@angular/common/test/forms/integration_spec.ts
index 3fa0c4571d..306bb4bd9e 100644
--- a/modules/@angular/common/test/forms/integration_spec.ts
+++ b/modules/@angular/common/test/forms/integration_spec.ts
@@ -585,7 +585,7 @@ export function main() {
                         });
                   }));
 
-        it("when new options are added",
+        it("when new options are added (selection through the model)",
            inject([TestComponentBuilder, AsyncTestCompleter],
                   (tcb: TestComponentBuilder, async) => {
                     var t = `<div>
@@ -615,6 +615,39 @@ export function main() {
                         });
                   }));
 
+        it("when new options are added (selection through the UI)",
+            inject([TestComponentBuilder, AsyncTestCompleter],
+                (tcb: TestComponentBuilder, async) => {
+                  var t = `<div>
+                      <select [(ngModel)]="selectedCity">
+                        <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
+                      </select>
+                  </div>`;
+
+                  tcb.overrideTemplate(MyComp8, t)
+                      .createAsync(MyComp8)
+                      .then((fixture) => {
+
+                        var testComp: MyComp8 = fixture.debugElement.componentInstance;
+                        testComp.list = [{"name": "SF"}, {"name": "NYC"}];
+                        testComp.selectedCity = testComp.list[0];
+                        fixture.detectChanges();
+
+                        var select = fixture.debugElement.query(By.css("select"));
+                        var ny = fixture.debugElement.queryAll(By.css("option"))[1];
+
+                        select.nativeElement.value = "1: Object";
+                        dispatchEvent(select.nativeElement, "change");
+                        testComp.list.push({"name": "Buffalo"});
+                        fixture.detectChanges();
+
+                        expect(select.nativeElement.value).toEqual("1: Object");
+                        expect(ny.nativeElement.selected).toBe(true);
+                        async.done();
+                      });
+                }));
+
+
         it("when options are removed",
            inject([TestComponentBuilder, AsyncTestCompleter],
                   (tcb: TestComponentBuilder, async) => {