title: Angular Material + TypeScript: Auto-complete + selecting option
body: <p>I'm having an issue with my code at the moment, whereby if I create a new chip, it hits my label model and creates a name and ID.</p>
  
  <p>However, when I type to select an option returned, if I click on the option, it returns an Object, rather than the label name.</p>
  
  <p>Here's a screenshot of the UI, where the dropdown that appears for <code>md-autocomplete</code> returns the name, a new label is created with just the name displayed, but clicking on <code>hotel</code> returns <code>{"id":1,"name":"hotel"}</code>. </p>
  
  <p>My problem is I want to return just the name and not sure where I need to make the change to do that.</p>
  
  <p><strong>UI:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/gMLjs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gMLjs.png" alt="enter image description here"></a></p>
  
  <p><strong>labels.html:</strong></p>
  
  <pre><code>&lt;md-content layout="column"&gt;
      &lt;md-chips ng-model="cont.vm.selectedLabels" md-autocomplete-snap md-require-match="false" 
          md-on-append="cont.createLabel($chip)"&gt;
        &lt;md-autocomplete
            md-selected-item="cont.vm.selectedItem"
            md-search-text="searchText"
            md-items="item in cont.querySearch(searchText)"
            md-item-text="item.name"
            md-min-length="2"
            placeholder="Type to add a label"&gt;
          &lt;span md-highlight-text="cont.vm.searchText" &gt;{{item.name}}&lt;/span&gt;
             &lt;md-not-found&gt;
               No matches found.
              &lt;/md-not-found&gt;       
        &lt;/md-autocomplete&gt;
        &lt;md-chip-template&gt;
          &lt;span&gt;
            &lt;strong&gt;{{$chip.name}}&lt;/strong&gt;
          &lt;/span&gt;
        &lt;/md-chip-template&gt;   
      &lt;/md-chips&gt;
      &lt;br /&gt;
      &lt;p class="md-title"&gt;Existing Labels&lt;/p&gt;
      &lt;md-list&gt;
        &lt;md-list-item class="md-2-line label-option" ng-repeat="label in cont.vm.labels" layout="row"
            layout-wrap&gt;
          &lt;div class="md-item-text md-whiteframe-z1" flex&gt;
            &lt;h3&gt;(NAME: {{label.name}}) (ID: {{label.id}})&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/md-list-item&gt;
      &lt;/md-list&gt;
  &lt;/md-content&gt;
  </code></pre>
  
  <p><strong>labelsController.ts:</strong></p>
  
  <pre><code>constructor(private $scope: common.IScope&lt;LabelScope&gt;, 
                  private labelsService: ILabelsService){
  
                      super($scope);
                      this.vm.labels = this.loadLabels();
                      this.vm.selectedLabels = [];
                      this.vm.selectedItem = null;
                      this.vm.searchText = null;         
                      console.log($scope);           
              } 
  
              private loadLabels() {
                  return this.labelsService.getLabels();
              }
              // Returns list of labels that already exists
              public querySearch (query: string) {
                  var results = query ? this.loadLabels() : [];
                  return results;
                  console.log(results);
              }          
              // Returns name + ID on new chip created
              public createLabel($chip: string) {
                  return {
                      name: $chip,
                      id: 4
                  };                                               
              }
  </code></pre>
  
  <p><strong>labelsService.ts:</strong></p>
  
  <pre><code> private mockLabels: Array&lt;Label&gt; = [
              new Label(1, 'hotel'),
              new Label(2, 'sport'),
              new Label(3, 'gaming'),
              new Label(4, 'apple'),
              new Label(5, 'retail')
          ];
  
          public getLabels() {
              return this.mockLabels;   
              console.log(this.mockLabels);         
          }
  </code></pre>