Auto-fill material design makes element non-selectable

Question

I use Material Design and AngularJS, and I want to display some non-selectable element in my autocomplete.

My autocomplete object, which can be associated with the object the user is working on. Some of these objects are already associated with another object. I want to display them, but make them non-selectable.

Here is my autocomplete in the tpl.html file:

    <md-autocomplete 
        md-no-cache="noCache"
        md-selected-item="selectedItem"
        md-search-text="searchText"
        md-selected-item-change= "controller.selectedItemChange(item)"
        md-items="item in controller.searchEntities(searchText)"
        md-item-text="item.display"
        md-min-length="3"
        placeholder="Enter Keyword"
        md-input-name="autocompleteEntities">
        <md-item-template>
            <span ng-show="!item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}}
            </span>
            <span class="linkedEntity" ng-show="item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}} <!-- Item I want to be unselectable -->
            </span>
        </md-item-template>
        <md-not-found>
            No Result For "{{searchText}}".
        </md-not-found>
    </md-autocomplete>  

My autocomplete works and returns to me the object I want.

I already tried to make an element non-selectable with pointer-events: none;, but you can still select it.

How to make an item unselectable?

Any help would be appreciated, thanks in advance.

Answer 1

<md-item-template>
     <span ng-click="$event.stopPropagation()">
            <span ng-show="!item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}}
            </span>
            <span class="linkedEntity" ng-show="item.isLinked"md-highlight-text="searchText" md-highlight-flags="^i">
                {{item.display}} <!-- Item I want to be unselectable -->
            </span>
    </span>
</md-item-template>

<md-item-template>
                <span md-selectable="your.expression"> </span>
</md-item-template>

angular.module('module').directive('mdSelectable', function($parse){
        return {
            restrict: 'A',
            link($scope, $elem, iAttrs){
                var liContainer = $elem.closest('li');
                if(!$parse(iAttrs.mdSelectable)($scope)){
                    liContainer.addClass('md-non-selectable');
                }

            }
        };
    });

.md-non-selectable