title: Changing value bind to ng-model doesn't change the value on the input text
body: <p>I have an input text box which use ngModel bind to a variable inside the component class. Upon clicking a button I want to clear the input text, however changing the variable value doesn't change the input text.</p>
  
  <p>I have re-assign the variable and call detectChanges() from ChangeDetectorRef, but it still doesn't work. </p>
  
  <p>This is the template that I have</p>
  
  <pre><code>&lt;form #beaconForm="ngForm" autocomplete="off"&gt;
          &lt;input #searchBox
                 id="search-query"
                 name="search-query"
                 [ngModel]="inputValue"
                 (ngModelChange)="searchAutocomplete($event)"
                 (keydown)="onKeyDown($event, searchBox)"
                 (blur)="onBlur()"
                 (focus)="onFocused(searchBox.value)"&gt;
          &lt;button color="accent" mat-mini-fab (click)="action(searchBox.value)"&gt;&lt;mat-icon&gt;add&lt;/mat-icon&gt;&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Then on clicking action I want to do</p>
  
  <pre><code>private inputValue: string = "";
  
  action(value) {
        this.inputValue = "";
        this.cd.detectChanges();
    }
  </code></pre>
  
  <p>I'm expecting this to clear the input, but it doesn't. Any idea where's my mistake?</p>