Odtnhj

I have not used AngularJS for quite a while, now, for some legacy project, I have to start using it again. One requirement is I have to provide auto-complete, below is the HTML:

<md-autocomplete
 ng-if="!enteredJd.id"
 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.searchedCompanies"
 md-item-text="item"
 md-min-length="0"
 placeholder="Enter hiring company name">
 <md-item-template>
 <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">item</span>
 </md-item-template>
</md-autocomplete>

And this is the JS:

self.isDisabled = false;
self.searchedCompanies = ;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.querySearch = querySearch;

function searchTextChange(text) 
 console.log('searching:', text);
 $scope.enteredJd.companyName = text;
 $http.defaults.headers.post["Content-Type"] = "application/json";
 var body = 
 type: 'company',
 term: text
 ;
 $http.post("/api/search",body).then(function(resp) 
 self.searchedCompanies = ;
 resp.data.forEach(function(item)
 self.searchedCompanies.push(item.standardName);
 );
 console.log(self.searchedCompanies)
 );

but when I test it, I found something weird.

The dropdown only display previous API response result, not current one. This behavior is so strange, I debugged that Api response is correct, once api returned, I assign it to searchedCompanies, ideally when i update this variable, dropdown options should be updated accordingly, but why when it is updated, it is displaying previous api response and current api response will be displayed during next api response?

Thanks and like to hear your analysis for this.

I followed the demo, it seemed to have this :

md-items="item in ctrl.querySearch(ctrl.searchText)"

but when I used this one, it never arrived, how is that?