Angular Material md-autocomplete bug

Reproducing an issue with md-autocomplete that causes the "no items" message to flash before the md-autocomplete displays items

by Aravind23

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css">
<!-- Included here because the External Resources panel is annoying to use -->
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.js"></script>
  </head>

  <body>
    <div ng-app="MdAutocompleteBugApp">
      <div ng-controller="MdAutocompleteBugController as vm">

        <md-toolbar class="md-padding">
          <md-autocomplete md-selected-item="selectedItem" md-search-text="searchText" md-items="item in vm.getSuggestions(searchText)" md-item-text="item.name" placeholder="Search">
            <md-item-template>
              <span>{{item.abbreviation}} - </span>
              <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.name}}</span>
            </md-item-template>
            <md-not-found>
              No matches found.
            </md-not-found>
          </md-autocomplete>
        </md-toolbar>
      </div>
    </div>
  </body>

</html>

CSS

html,
body,
md-autocomplete {
  background: #eee;
}

JavaScript

// ================================= Mock Server Start =============================
var FAILURE_COEFF = 10;
var MAX_SERVER_LATENCY = 200;

function getRandomBool(n) {
  var maxRandomCoeff = 1000;
  if (n > maxRandomCoeff) n = maxRandomCoeff;
  return Math.floor(Math.random() * maxRandomCoeff) % n === 0;
}

function getSuggestions(text) {
  var pre = 'pre';
  var post = 'post';
  var results = [];
  if (getRandomBool(2)) {
    results.push(pre + text);
  }
  if (getRandomBool(2)) {
    results.push(text);
  }
  if (getRandomBool(2)) {
    results.push(text + post);
  }
  if (getRandomBool(2)) {
    results.push(pre + text + post);
  }
  return new Promise((resolve, reject) => {
    var randomTimeout = Math.random() * MAX_SERVER_LATENCY;
    setTimeout(() => {
      if (getRandomBool(FAILURE_COEFF)) {
        reject();
      } else {
        resolve(results);
      }
    }, randomTimeout);
  });
}
// ================================= Mock Server End =============================



angular
    .module('MdAutocompleteBugApp', ['ngMaterial'])
    .controller('MdAutocompleteBugController', function($scope, $q, $timeout) {
        this.getMatches = function(searchText) {
            var deferred = $q.defer();

            $timeout(function() {
                var states = getStates().filter(function(state) {
                    return (state.name.toUpperCase().indexOf(searchText.toUpperCase()) !== -1 || state.abbreviation.toUpperCase().indexOf(searchText.toUpperCase()) !== -1);
                });
                deferred.resolve(states);
            }, 1500);

            return deferred.promise;
        }
    });


function getStates() {
    return [{
        "name": "Alabama",
        "abbreviation": "AL"
    }, {
        "name": "Alaska",
        "abbreviation": "AK"
    }, {
        "name": "American Samoa",
        "abbreviation": "AS"
    }, {
        "name": "Arizona",
        "abbreviation": "AZ"
    }, {
        "name": "Arkansas",
        "abbreviation":...