title: Input value not changing in Angular
body: <p>I have a custom component where the user can search for values with a dropdown/input combination and click the result or scroll and search in the dropdown and click the value, this will set the input value to the clicked dropdown value.</p>
  
  <p>Assume the values are: ['foo', 'bar', 'fee']</p>
  
  <p>If I click 'foo' in the dropdown, the input value will as expected change to 'foo'. However, if then I backspace a bit to 'f' and then <strong>click</strong> 'foo' again, it will set the variable to 'foo', but it won't update the dropdown value.</p>
  
  <p>If my value was 'foo', I backspaced and I clicked 'fee', it does update like it should.</p>
  
  <p>What is the problem of my value not updating in the input? </p>
  
  <p>search-select.html:</p>
  
  <pre><code>&lt;div&gt;
      &lt;input type="text"
          (input)="filterDropdown()"
          [(ngModel)]="filterValue" [value]="selectedItemName"/&gt; &lt;-- no change here
          {{selectedItemName}} &lt;-- does change here (but I don't want it here)
      &lt;div&gt;
          &lt;div *ngFor="let item of filteredItems" (click)="setItem(item)"&gt;
              {{item.name}}
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>search-select.ts:</p>
  
  <pre><code>public setItem(item): void {
          this.selectedItemName = item[this.itemName];
  }
  </code></pre>