Angular: Empty Fiddle

http://angularjs.org/

by ninty9notout

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<div ng-controller="MainCtrl as ctrl" layout="column" ng-cloak>
  <md-content class="md-padding">
    <form ng-submit="$event.preventDefault()" name="editorForm">
      <div layout-gt-sm="row">
        <md-autocomplete flex required
            md-input-name="autocompleteField"
            md-input-minlength="2"
            md-input-maxlength="18"
            md-no-cache="false"
            md-selected-item="ctrl.selectedItem"
            md-search-text="ctrl.searchText"
            md-items="item in ctrl.search(ctrl.searchText)"
            md-item-text="item.name"
            md-require-match
            md-floating-label="Currency">

          <md-item-template>
            <span md-highlight-text="ctrl.searchText">{{item.name}}</span>
          </md-item-template>

          <div ng-messages="editorForm.autocompleteField.$error" ng-if="editorForm.autocompleteField.$touched">
            <div ng-message="required">You <b>must</b> have a favorite state.</div>
            <div ng-message="md-require-match">Please select an existing state.</div>
            <div ng-message="minlength">Your entry is not long enough.</div>
            <div ng-message="maxlength">Your entry is too long.</div>
          </div>
        </md-autocomplete>
      </div>
    </form>
  </md-content>
</div>

JavaScript

var app = angular.module('app', ['ngMaterial', 'ngMessages']);

app.controller('MainCtrl', ($q) => {
    let vm = this;
    
    vm.currencies = [
      	{
        		name: 'Bitcoin',
            value: 'bitcoin',
            code: 'BTC',
            symbol: '฿'
        },
        {
        		name: 'Stellar Lumens',
            value: 'stellar',
            code: 'XLM',
            symbol: 'XLM'
        }
    ];
    
    vm.selectedItem = null;
    vm.searchText = null;

		vm.editor = {
    		currency: 'bitcoin',
        date: null,
        price: 0.00
    };
    
    vm.search = (query) => {
        let results = currencies;

        if (query) {
          results = currencies.filter(createFilterFor(query));
        }

        return $q.resolve(results);
    };

    function createFilterFor(query) {
      const lowercaseQuery = angular.lowercase(query);
      return function filterFn(currency) {
        return currency.name.indexOf(lowercaseQuery) === 0;
      };
    }

    return vm;
});