This is the most basic usage of the autocomplete-list directive.

<autocomplete-list
  ng-model  ="ctrl.selectedPeople"
  items     ="ctrl.allPeople"
  item-text ="item.firstName + ' ' + item.lastName"
  item-id   ="item.age">
</autocomplete-list>
          

Result:

ctrl.selectedPeople = {{ ctrl.selectedPeople }}

By adding markup inside the directive you can customize the appearence of each list item. Note for the moment you have to include the additional buttons for them to be rendered.

<autocomplete-list
  ng-model  ="ctrl.selectedPeople"
  items     ="ctrl.allPeople"
  item-id   ="item.age">
  <p>{{ item.lastName }}, {{ item.firstName }}</p>

  <md-button type="button" class="md-exclude multi-select-secondary-button" ng-click="aclCtrl.deselectItem(item)" aria-label="remove">
    <md-icon ng-include="'autocompleteListClear.svg'"></md-icon>
  </md-button>
</autocomplete-list>
          

Result:

Here, we have simply changed the display format of the name. This could easily be accomplished with item-text property but this is just for demonstration

ctrl.selectedPeople = {{ ctrl.selectedPeople }}

You can even add additional controls to the list to edit other properties of your items.

<autocomplete-list
  ng-model  ="ctrl.selectedPeople"
  items     ="ctrl.allPeople"
  item-id   ="item.age">
  <p>{{ item.firstName + ' ' + item.lastName }}</p>
  <input type="number" ng-model="item.age">

  <md-button type="button" class="md-exclude multi-select-secondary-button" ng-click="aclCtrl.deselectItem(item)" aria-label="remove">
    <md-icon ng-include="'autocompleteListClear.svg'"></md-icon>
  </md-button>
</autocomplete-list>
          

Result:

ctrl.selectedPeople = {{ ctrl.selectedPeople }}