JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.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>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<div ng-app="demo" ng-controller="demo">
<md-autocomplete flex
md-search-text="searchText"
md-input-name="p"
md-items="item in search(searchText)"
md-item-text="item.display"
md-floating-label="Name"
md-delay="100"
>
<md-item-template>
<span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display}}</span>
</md-item-template>
</md-autocomplete>
</div>
JavaScript
demo = angular.module("demo", ["ngMaterial", "ngMessages"]);
demo.controller("demo", function($scope, $q){
$scope.search = function(){
alert(1);
return $q.resolve([{
value: 1,
display: "one"
}, {
value: 2,
display: "two"
}, {
value: 3,
display: "three"
}]);
};
});