Change selected value in md-autocomplete in angular material

Question

I using md-autocomplete in my page, Now I need to edit a record, how to change selected value in md-autocomplete programmatically?

This is angular code:

app.controller('DemoCtrl', DemoCtrl);
function DemoCtrl($timeout, $q, $log) {
    var self = this;
    self.simulateQuery = false;
    self.isDisabled = false;
    self.states = loadAll();
    self.querySearch = querySearch;

    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 createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);
        return function filterFn(state) {
            return (state.value.indexOf(lowercaseQuery) != -1);
        };
    }
    function loadAll() {
        return totlaTablaeau.map(function (repo) {
            repo.value = repo.address.toLowerCase();
            return repo;
        });

    }
};

Answer 1

Here's a CodePen using the online docs example. You just need to set the value of md-selected-item.

Markup

<md-autocomplete ... md-selected-item="ctrl.selectedItem" ...></md-autocomplete>

...

<md-button class="md-raised md-primary" ng-click="ctrl.selectArkansas()">Select Arkansas</md-button>

JS

self.selectArkansas = function() {
  self.selectedItem = {
      value: "Arkansas".toLowerCase(),
      display: "Arkansas"
    };
}