title: Angular Material: md-autocomplete - how to hide md-autocomplete-suggestions on Enter event?
body: <p>I have <code>md-autocomplete</code>:</p>
  
  <pre><code>&lt;md-autocomplete 
                           md-min-length="1"
                           ng-enter="presEnter();"
                           md-no-cache="true"                        
                           md-selected-item="selectedItem" 
                           md-search-text="searchText" 
                           md-items="item in querySearch(searchText)"
                           md-item-text="item.name" 
                           placeholder="Search for a vegetable"&gt;
            &lt;span md-highlight-text="searchText"&gt;{{item.name}} :: {{item.type}}&lt;/span&gt;
          &lt;/md-autocomplete&gt;
  </code></pre>
  
  <p>with directive: <code>ng-enter</code>.</p>
  
  <p>My goal: <strong>When user presses <code>Enter</code> I want to hide <code>md-autocomplete-suggestions</code> dropdown</strong> </p>
  
  <p>I know from HTML I need somehow to call: <code>$mdAutocompleteCtrl.hidden = true;</code> but have no idea how to use <code>$mdAutocompleteCtrl</code> in Controller. </p>
  
  <p>I googled and found: </p>
  
  <pre><code>$timeout( function() { $scope.$$childHead.$mdAutocompleteCtrl.hidden = true; },100);
  </code></pre>
  
  <p>but there is no <code>$mdAutocompleteCtrl</code> (at least in my JS, only in HTML and i don't know its scope)</p>
  
  <p>I play with this <a href="http://codepen.io/anon/pen/XbOPgv?editors=101" rel="noreferrer">example</a>: type 'a' and after dropdown press Enter.</p>
  
  <p>Any ideas?</p>