md-autocomplete giving error on .then function - angularjs

Question

I am not able to use angularjs md-autocomplete directive. Please let me know where is the issue.
TypeError: Cannot read property 'then' of undefined
at de (angular-material.min.js:13)
at he (angular-material.min.js:13)
at e.B [as focus] (angular-material.min.js:13)
at fn (eval at compile (angular.min.js:230), <anonymous>:4:415)
at b (angular.min.js:125)
at e (angular.min.js:272)
at b.$eval (angular.min.js:144)
at b.$apply (angular.min.js:145)
at HTMLInputElement.<anonymous> (angular.min.js:272)
I get this error when I opens md-autocomplete
TypeError: Cannot read property 'filter' of undefined
at DeliveryCtrl.querySearch (DeliveryCtrl.js:81)
at fn (eval at compile (angular.min.js:230), <anonymous>:4:416)
at b (angular.min.js:125)
at n.$eval (angular.min.js:144)
at de (angular-material.min.js:13)
at he (angular-material.min.js:13)
at e.B [as focus] (angular-material.min.js:13)
at fn (eval at compile (angular.min.js:230), <anonymous>:4:415)
at b (angular.min.js:125)
at e (angular.min.js:272)
here is my controller
(function() {
'use strict';
RLabs.controller('DeliveryCtrl', DeliveryCtrl);
function DeliveryCtrl($timeout, $q, $log, $http, $scope, resto_info, base_url) {
$scope.delivery_areas = [];
$scope.fun1 = function() {
$scope.fun2().then(function(data) {
console.log("after call to fun2"); // execute before fun2
var myArray = data;
var myString = JSON.stringify(myArray.join(', '));
console.log(myString);
console.log(myArray);
return myString.split(/, +/g).map(function(state) {
return {
value: state.toLowerCase(),
display: state
};
});
});
}
$scope.fun2 = function() {
var deferred = $q.defer();
$http({
url: base_url.base_url + 'profile-load',
method: "POST",
data: {
"profile_id": resto_info.profile_id,
"api_key": resto_info.api_key,
"app_version": resto_info.app_version,
"request_operation": "get_delivery_area_data"
}
}).success(function(response) {
console.log(response);
console.log(response.response.location[0].delivery.areas);
$scope.delivery_areas = response.response.location[0].delivery.areas;
console.log($scope.delivery_areas);
deferred.resolve(response.response.location[0].delivery.areas);
}).error(function() {
deferred.resolve(null);
});
return deferred.promise;
}
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
self.states = $scope.fun1();
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.newState = newState;
function newState(state) {
alert("Sorry! You'll need to create a Constitution for " + state + " first!");
}
function querySearch(query) {
var results = query ? self.states.filter(createFilterFor(query)) : self.states,
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) {
$log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
}
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
}})();
and here is my html
<div ng-controller="DeliveryCtrl as ctrl" layout="column" ng-cloak>
<md-content class="md-padding">
<form ng-submit="$event.preventDefault()">
<p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
<md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" 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="What is your favorite US state?">
<md-item-template>
<span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</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>
<br/>
<md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox>
<md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox>
<md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>
<p>By default, <code>md-autocomplete</code> will cache results when performing a query. After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>
</form>
</md-content>
please provide me the solution how to get the value of myString in the autocomplete directive select list

Answer 1

i had the same issue, this works for me:
function autoComplete(query) {
if (!query || query.length < 2) {
return vm.complete = [];
}
// http request
}