Angular auto complete returns a blank list

Question

I'm using AngularJS to create an auto complete. The list of values for auto completion will be provided using json. In my app, when I start typing, I get an empty list. All the values are blank. Here's my view code :

<md-autocomplete flex required
    md-input-name="un_registered[vehicle_attributes][brand_name]"
    md-no-cache="mainCtrl.noCache"
    md-selected-item-chang=""
    md-search-text-change=""
    md-selected-item="mainCtrl.selectedItem"
    md-search-text="mainCtrl.searchText"
    md-items="item in mainCtrl.querySearch(mainCtrl.searchText)"
    md-item-text="item.display"
    md-floating-label="Brand" id="un_registered_vehicle_attributes_brand_name">
  <md-item-template>
    <span md-highlight-text="mainCtrl.searchText">{{item.display}}</span>
  </md-item-template>
  <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
    <div ng-message="required">You <b>must</b> have a favorite state.</div>
    <div ng-message="minlength">Your entry is not long enough.</div>
    <div ng-message="maxlength">Your entry is too long.</div>
  </div>
</md-autocomplete>

Here's my querySearch function :

mainCtrl.querySearch = querySearch;

function querySearch(query) {
    return $http.get("/panel/all_brands.json")
        .then(function(result) {
            return result;
        });
}

My json data :

["Example Brand","abcdd","Example Brand2Hh","rr","ffff"]

What might be the problem?

Answer 1

Change 1:

 function querySearch(query) {
    $http.get("/panel/all_brands.json").success(
    function(data, status, headers, config) {
        mainCtrl.TestData = data;
    });
}

Change 2:

md-search-text-change="mainCtrl.querySearch(mainCtrl.searchText)"
md-selected-item="mainCtrl.selectedItem"
md-search-text="mainCtrl.searchText"
md-items="item in mainCtrl.TestData | filter: mainCtrl.searchText"

Change 3:

 <span md-highlight-text="mainCtrl.searchText">{{item}}</span>