title: How to display using [displayWith] in AutoComplete Material2
body: <p>I have an <code>array</code> that comes from my API and I'm using <a href="https://material.angular.io/components/component/autocomplete" rel="noreferrer"><strong>Material2#AutoComplete</strong></a> to filter this... it's working so far, however I'm in trouble to display the another <em>property</em> instead of the <em>binded</em> value in <em>option</em>.</p>
  
  <p>I know I have to use <a href="https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete.ts#L51" rel="noreferrer"><code>displayWith</code></a>, however it isn't working as I'm expecting. The function called as <code>[displayWith]="displayFn.bind(this)"&gt;</code> just returns me the <code>id</code>, how can I get the full object and so return the <code>name</code> on function.</p>
  
  <p>BTW, I still want to have the id binded in my <strong>FormControl</strong>.</p>
  
  <p>Some code:</p>
  
  <p><strong><em>Component:</em></strong></p>
  
  <pre><code>export class AutocompleteOverviewExample {
    stateCtrl: FormControl;
    filteredStates: any;
  
    states = [
      { 
        id: 1,
        name: 'Alabama'
      },
      {
        id: 2,
        name: 'North Dakota'
      },
      {
        id: 3,
        name: 'Mississippi'
      }
    ];
  
    constructor() {
      this.stateCtrl = new FormControl();
      this.filteredStates = this.filterStates('');
    }
  
    onKeyUp(event: Event): void {
      this.filteredStates = this.filterStates(event.target.value);
    }
  
    filterStates(val: string): Observable&lt;any&gt; {
      let arr: any[];
      console.log(val)
      if (val) {
        arr = this.states.filter(s =&gt; new RegExp(`^${val}`, 'gi').test(s.name));
      } else {
        arr = this.states;
      }
  
      // Simulates request
      return Observable.of(arr);
    }
  
    displayFn(value) {
      // I want to get the full object and display the name
      return value;
    }
  }
  </code></pre>
  
  <p><strong><em>Template:</em></strong></p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;md-input-container&gt;
    &lt;input mdInput placeholder="State" (keyup)="onKeyUp($event)" [mdAutocomplete]="auto" [formControl]="stateCtrl"&gt;
  &lt;/md-input-container&gt;
  
  &lt;md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)"&gt;
    &lt;md-option *ngFor="let state of filteredStates | async" [value]="state.id"&gt;
      {{ state.name }}
    &lt;/md-option&gt;
  &lt;/md-autocomplete&gt;
  </code></pre>
  
  <p>Basically, it's almost the same as <a href="https://stackoverflow.com/questions/44070998/value-not-displaying-for-material2-autocomplete"><strong>this question</strong></a> (unfortunately both answers are incorrect or throw errors).</p>
  
  <p>Here's the <a href="https://plnkr.co/edit/8lrmolKoKk3l10951vkS?p=info" rel="noreferrer"><strong>PLUNKER</strong></a>.</p>