Angular Material autocomplete

by Aravind23

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<div ng-app="myAppp" ng-controller="mainCtrl as ctrl">
  <div layout-gt-sm="row" layout="column" layout-margin>
    <md-autocomplete md-selected-item="ctrl.selectedItem"  
                     md-search-text="ctrl.searchText" 
                     md-items="item in ctrl.querySearch(ctrl.searchText)" 
                     md-item-text="item" 
                     placeholder="What is your favorite ANIMAL?">
      <md-item-template>
        <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item}}</span>
      </md-item-template>
      <md-not-found>
        No states matching "{{ctrl.searchText}}" were found.
        <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
      </md-not-found>
    </md-autocomplete>
  </div>
</div>

JavaScript

angular.module('myAppp', ['ngMaterial'])
  .controller('mainCtrl', mainCtrl);

function mainCtrl() {
  var ctrl = this;

  ctrl.items = [
    'bear',
    'lion',
    'zebra',
    'african wild dog'
  ];

  ctrl.querySearch = function(searchText) {
    var array = ctrl.items.filter(function(item) {
      return item.indexOf(searchText) !== -1;
    });
    for(var j=0;j<array.length;j++) {
    	array[j] = array[j] + "m";
    }   
    console.log(array);
    return array;
  }
}