The md-autocomplete template with ng-click cannot prevent selection

Question

I am trying to put a button inside the md-item md-autocomplete template to trigger some action.

Problem: I cannot prevent item selection. $event.preventDefault();does not work, and there is no hint in the documentation.

My goal is to enable the (normal) sentence selection or click on the button, the text from this sentence should be copied into the search field. In the second case, the user can continue to write to further narrow down his search. Google has this feature in its mobile search so that the user can narrow the search without recording all of this, and I want to use this feature in my application.

<md-autocomplete md-selected-item="nvSearchCtrl.selectedItem"
             md-search-text="nvSearchCtrl.unfinishedParticle"
             md-items="item in nvSearchCtrl.querySearch(nvSearchCtrl.unfinishedParticle)"
             md-item-text="item.name">
<md-item-template>
    <div layout="row">
        <span>{{item.name}}</span>
        <md-button ng-click="$event.preventDefault();nvSearchCtrl.unfinishedParticle=item.name;"
                   class="md-icon-button">
            <md-icon>call_made</md-icon>
        </md-button>
    </div>
</md-item-template>
</md-autocomplete>

I prepared a script showing the error: https://jsfiddle.net/4509c87b/

Answer 1

. stop-event .

angular

.directive('stopEvent', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            element.bind('click', function (e) {
                e.stopPropagation();
            });
        }
    };
 });

Answer 2

, event.stopPropagation() ( click dom, ) event.preventDefault().