md-autocomplete with error：无法读取未定义的属性'then'

Question

我正在尝试使用md-autocomplete指令和MVC实现自动完成功能。

以下是HTML代码段

<div ng-controller="BookTicketController as ctrl" layout="column" ng-cloak>
  <md-content class="md-padding">
    <form ng-submit="$event.preventDefault()">
      <md-autocomplete ng-disabled="ctrl.isDisabled" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)"
      md-item-text="item.display" md-min-length="0" placeholder="Search for stations here!">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
        <md-not-found>
          No matches found
        </md-not-found>
      </md-autocomplete>
    </form>
  </md-content>
</div>

BookTicketController.js代码，

(function() {
  'use strict';
  angular
    .module('myApp', ['ngMaterial'])
    .controller('BookTicketController', BookTicketController);

  function BookTicketController($http, $timeout, $q, $log, $scope) {

    var self = this;

    self.simulateQuery = false;
    self.isDisabled = false;
    // list of `state` value/display objects
    self.stations = loadAll($http);
    self.querySearch = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange = searchTextChange;

    //self.newState = newState;

    function querySearch(query) {
      var results = query ? self.stations.filter(createFilterFor(query)) : self.stations,
        deferred;
      if (!query) {
        return;
      }
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function() {
          deferred.resolve(results);
        }, Math.random() * 1000, false);
        return deferred.promise;
      } else {
        return results;
      }
    }

    function searchTextChange(text) {
      $log.info('Text changed to ' + text);
    }

    function selectedItemChange(item) {
      $log.info('Item changed to ' + JSON.stringify(item));
    }

    function loadAll($http) {
      var allStations = [];
      var result = [];
      $http.get('/Train/GetAllStations')
        .then(function(response) {
          allStations = response.data;
          angular.forEach(allStations, function(station, key) {
            result.push({
              value: station.StationName.toLowerCase(),
              display: station.StationName
            });
          })
        });
      return result;
    }

    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(state) {
        return (state.value.indexOf(lowercaseQuery) === 0);
      };

    }
  }
})();

我收到错误声明'angular.js：14525 TypeError：无法读取属性'然后'未定义'

你们有没有人可以帮我解决这个问题？