Angular Material: md-autocomplete - how to hide md-autocomplete-suggestions on Enter event?

Question

I have md-autocomplete:

Answer 1

The $mdAutocompleteCtrl is placed as a property on the autocomplete's scope.

First, you need access to the autocomplete element. One way to do that is to put an ID on the autocomplete:

Then you can use that element to get the inner scope of the autocomplete. Because the autocomplete element itself is on the scope that you provided, you'll want to get the scope of one of the autocomplete's child elements.

$scope.presEnter = function(e){
    var autoChild = document.getElementById('Auto').firstElementChild;
    var el = angular.element(autoChild);
    el.scope().$mdAutocompleteCtrl.hidden = true;
};

Here is a working example: http://codepen.io/anon/pen/rVPZKN?editors=101