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 pankaj agrawal

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 -->
<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>

<div ng-app="MdAutocompleteBugApp">
    <div ng-controller="MdAutocompleteBugController as vm">
        <md-content class="md-padding">
            <strong>To reproduce:</strong>
            <ul>
                <li>Type "Arizona" into the search box</li>
                <li>Before the list is populated with "AZ - Arizona", "No matches found" will briefly flash</li>
            </ul>
        </md-content>

        <md-toolbar class="md-padding">
            <md-autocomplete 
            md-selected-item="selectedItem"
            md-search-text="searchText" 
            md-items="item in vm.getMatches(searchText)" 
            md-item-text="item.name" 
            placeholder="Search states" 
            md-no-cache="true">
                <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>

CSS

html,
body {
    background: #eee;
}

JavaScript

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;
        }
        
        alert($scope.selectedItem);
    });


function getStates() {
    return [{
        "name": "Alabama",
        "abbreviation": "AL"
    }, {
        "name": "Alaska",
        "abbreviation": "AK"
    }, {
        "name": "American Samoa",
        "abbreviation": "AS"
    }, {
        "name": "Arizona",
        "abbreviation": "AZ"
    }, {
        "name": "Arkansas",
        "abbreviation": "AR"
    }, {
        "name": "California",
        "abbreviation": "CA"
    }, {
        "name": "Colorado",
        "abbreviation": "CO"
    }, {
        "name": "Connecticut",
        "abbreviation": "CT"
    }, {
        "name": "Delaware",
        "abbreviation": "DE"
    }, {
        "name": "District Of Columbia",
        "abbreviation": "DC"
    }, {
        "name": "Federated States Of Micronesia",
        "abbreviation": "FM"
    }, {
        "name": "Florida",
        "abbreviation": "FL"
    }, {
        "name": "Georgia",
        "abbreviation": "GA"
    }, {
        "name": "Guam",
        "abbreviation": "GU"
    }, {
        "name": "Hawaii",
        "abbreviation": "HI"
    }, {
        "name": "Idaho",
        "abbreviation": "ID"
    }, {
        "name": "Illinois",
        "abbreviation": "IL"
    }, {
        "name": "Indiana",
        "abbreviation": "IN"
    }, {
        "name": "Iowa",
        "abbreviation": "IA"
 ...