title: Angular 7 and HTML selects issue
body: <p>I have an Angular 7 reactive form which have, among others, the following fields:</p>
  
  <pre><code>&lt;div class="ui-grid-col-2"&gt;
      &lt;select formControlName="network_interface" (change)="onInterfaceChange($event.target.value)"&gt;
          &lt;option *ngFor="let ifc of interfaces; let idx = index;" [value]="ifc.id"&gt;
              {{ ifc.id }} - {{ ifc.name }}
          &lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="ui-grid-col-2"&gt;
      &lt;select formControlName="interface_ip"&gt;
          &lt;option *ngFor="let obj of interfacesIps; let idx = index;" [value]="obj.id"&gt;
              {{ obj.name }}&amp;nbsp;({{obj.address}})
          &lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically, it allows the user to select an interface and interface IP from 2 lists, stored in the arrays <code>interfaces</code> and <code>interfacesIps</code>.</p>
  
  <p>One combo is 'tied' to the other, so if I select an interface the other combo must show its internal IP addresses. This is done in the <code>onInterfaceChange</code> event handler, fired by the <code>change</code> event. This is what I do:</p>
  
  <pre><code>onInterfaceChange(interfaceId : any): void {
      // NOTE: this.interfaces[INDEX].ips is an array of IP addresses
      this.interfacesIps = this.interfaces[interfaceId].ips;
  }
  </code></pre>
  
  <p>This works, and the IP list is refreshed whenever I change the selected interface, BUT I've realized that the form control associated to the combo (<code>interface_ip</code>) is not updated. It should be the first IP in the list, but I keeps the old value, until I change to another IP.</p>
  
  <p>I've fixed this by manually changing the form control value on the event handler above, but I'd like to know if there's a way to do it automatically.</p>
  
  <p>Thanks in advance,</p>