在输入时实现有角度的材料自动完成搜索

我做了一个自动完成，点击按钮可以很好地从远程服务器获取所有关键结果。然而，任务是实现与自动完成栏上的输入功能相同的功能。

编辑：自动建议完美地显示结果，我想收集搜索文本，并在用户进入搜索框时在新页面上显示完整的结果，否则只有自动建议中的摘要

navbar.html

...
    <div  ng-controller="AppCtrl as ctrl" >    
    <form ng-submit="$event.preventDefault()" style="width: 100%; background: transparent;" ng-controller="gotoSearchLanding">
                          <md-autocomplete
                              ng-disabled="ctrl.isDisabled"
                              md-no-cache="ctrl.noCache"
                              md-selected-item="ctrl.selectedItem"
                              md-search-text-change=""
                              md-search-text="ctrl.searchText"
                              md-selected-item-change="ctrl.selectedItemChange(item)"
                              md-items="item in ctrl.searchTextChange(ctrl.searchText)"
                              md-item-text="item.name"
                              md-min-length="0"
                              placeholder="Search Data"
                              ng-enter="gotoSearchLandingFun(ctrl.searchText)">>
                              <md-item-template>
                              <span class="item-title">
                                <img ng-src="img/jobs.png" width="20">
                                <span> {{item.name}} </span>
                              </span>
                              <span class="item-metadata">
                                <span class="item-metastat">
                                  <strong>{{item.employee_id}}</strong> 
                                </span>
                                <span class="item-metastat">
                                  <strong>{{item.email}}</strong> 
                                </span>
                              </span>
                            </md-item-template>
                          </md-autocomplete>
                        </form>
                        <span ng-controller="gotoSearchLanding">
                         <md-button class="md-fab md-mini" style="background-color:#fff" aria-label="Eat cake"  ng-click="gotoSearchLandingFun(ctrl.searchText)">
                            <ng-md-icon icon="search"></ng-md-icon>
                        </md-button>   
                        <span>
    </div>

controller.js

/**
 * Auto Search App Controller
 */
angular.module('AppTool')
  .controller('AppCtrl', [ '$http', '$state', AppCtrl]);
  function AppCtrl ($http, $state) {
    var self = this;      
    self.simulateQuery = false;
    self.isDisabled    = false;
    self.querySearch   = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange   = searchTextChange;
    function querySearch (query) {
      var results = query ? self.repos.filter( createFilterFor(query) ) : self.repos,
          deferred;
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
        return deferred.promise;
      } else {
        return results;
      }
    }
    function searchTextChange(text) {
     return $http.get('http://localhost:3000/search', {
        params: {
          q: text
        }
      }).then(function(response){
        return response.data.map(function(item){
          return item._source;
        });
      }, function (error) {
          console.log("error");
      });
    }
    function selectedItemChange(item) {
    }
    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(item) {
        return (item.value.indexOf(lowercaseQuery) === 0);
      };
    }
}

gotsearchlandingCtrl.js

angular.module('AppTool')
    .controller('gotoSearchLanding', ['$scope','$state', gotoSearchLanding]);
function gotoSearchLanding($scope, $state) {
 $scope.gotoSearchLandingFun = function($val) {
        alert($val);  
        $state.go("searchLanding", { searchVal: $val});
    };     
}

directive.js

angular.module('PdbTool')
.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.myEnter);
                });
                event.preventDefault();
            }
        });
    };
});