Untitled

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
    <link rel="stylesheet" href="style.css">
</head>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>
    <script src="script.js"></script>

    <div ng-app="autocompleteDemo" ng-controller="DemoCtrl as ctrl" layout="column">

    <md-content class="md-padding" layout="column">
        <p>
            Use <code>&lt;md-autocomplete&gt;</code> to search for matches from local or remote data sources.
        </p>

      <md-autocomplete
          ng-disabled="isDisabled"
          md-no-cache="noCache"
          md-search-text="searchText"
          md-items="item in querySearch(searchText)"
          md-item-text="item.display"
          md-selected-item="selection"
          md-selected-item-change="search(selection)"
          placeholder="Search for a song!">
        <span md-highlight-text="searchText">{{item.display}}</span>
      </md-autocomplete>

      <br/>


      <ul>
        <li ng-repeat="song in songs" ng-click="addSong(song); added = 'true'; done='false'" ng-class="{'blink_me':added}">{{ song.title }}</li>
      <ul>

    </md-content>

  </div>

</body>
</html>