angular-material-npfixed/src/components/chips/demoContactChips/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="ContactChipDemoCtrl as ctrl" layout="column" ng-cloak>

  <md-content class="md-padding autocomplete" layout="column">
    <md-contact-chips
        ng-model="ctrl.contacts"
        md-contacts="ctrl.querySearch($query)"
        md-contact-name="name"
        md-contact-image="image"
        md-contact-email="email"
        md-require-match="true"
        md-highlight-flags="i"
        filter-selected="ctrl.filterSelected"
        placeholder="To">
    </md-contact-chips>

    <md-list class="fixedRows">
      <md-subheader class="md-no-sticky">Contacts</md-subheader>
      <md-list-item class="md-2-line contact-item" ng-repeat="(index, contact) in ctrl.allContacts"
          ng-if="ctrl.contacts.indexOf(contact) < 0">
        <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
        <div class="md-list-item-text compact">
          <h3>{{contact.name}}</h3>
          <p>{{contact.email}}</p>
        </div>
      </md-list-item>
      <md-list-item class="md-2-line contact-item selected" ng-repeat="(index, contact) in ctrl.contacts">
        <img ng-src="{{contact.image}}" class="md-avatar" alt="{{contact.name}}" />
        <div class="md-list-item-text compact">
          <h3>{{contact.name}}</h3>
          <p>{{contact.email}}</p>
        </div>
      </md-list-item>
    </md-list>

    <br>
    <h2 class="md-title">Searching asynchronously.</h2>
    <md-contact-chips
        ng-model="ctrl.asyncContacts"
        md-contacts="ctrl.delayedQuerySearch($query)"
        md-contact-name="name"
        md-contact-image="image"
        md-contact-email="email"
        md-require-match="true"
        md-highlight-flags="i"
        filter-selected="ctrl.filterSelected"
        placeholder="To">
    </md-contact-chips>
  </md-content>
</div>