how to change a md-autocomplete to a datalist with on change behavior

I have this initial snippet of an md auto-complete. Its related to an on-change function that effect other inputs to auto-generate their data or used to search by criteria. I want now to change it to a basic datalist but I struggle changing the md directives to ng directives.

    <md-autocomplete
        md-input-id="[[${searchable.id}]]"
        md-selected-item="selectedItem"
        md-clear-button="!data[[${dataid}]][[${searchable.reference}]].disabled"
        md-search-text-change="[[${searchable.id}]].searchTextChange(searchText)"
        md-search-text="searchText"
        md-selected-item-change="[[${searchable.id}]].selectedItemChange(item)"
        md-items="item in [[${searchable.id}]].querySearch(searchText)"
        md-item-text="[[${searchable.id}]].itemText(item)"
        ng-required="data[[${dataid}]][[${searchable.reference}]].required && data[[${dataid}]][[${searchable.reference}]].visible"
        placeholder="Search..."
        md-input-name="[[${searchable.reference}]]"
        md-menu-class="searchable-md-container"
        md-min-length="0"
        ng-blur="[[${searchable.id}]].onBlur()"
        ng-focus="[[${searchable.id}]].focus()"
        md-no-cache="true"
        xcriteria="[[${searchable.dataid}]]"
        lang="[[${searchable.reference}]]"
        md-select-on-match="true"
        ng-keydown="[[${searchable.id}]].onKeypress($event)"
        md-match-case-insensitive="true"
        ng-disabled="data[[${dataid}]][[${searchable.reference}]].disabled"
        class="searchable-class"
>
    <md-item-template>
        <span   md-highlight-text="searchText"
                 md-highlight-flags="i"
                 class="item-text">
            {{item.value}}
        </span>
    </md-item-template>
</md-autocomplete>

I have this try so far :

        <input list="data[[${dataid}]][[${searchable.reference}]]"
            ng-model="[[${searchable.id}]].selectedItem"
            ng-id="[[${searchable.id}]]"
            ng-required="data[[${dataid}]][[${searchable.reference}]].required && data[[${dataid}]][[${searchable.reference}]].visible"
            placeholder="Search..."
            ng-keydown="[[${searchable.id}]].onKeypress($event)"
            ng-disabled="data[[${dataid}]][[${searchable.reference}]].disabled"
            ng-blur="[[${searchable.id}]].onBlur()"
            ng-focus="[[${searchable.id}]].focus()"
            xcriteria="[[${searchable.dataid}]]"
            lang="[[${searchable.reference}]]"
            ng-change="[[${searchable.id}]].selectedItemChange(selectedItem)"
        />
    <datalist id="data[[${dataid}]][[${searchable.reference}]]"
              >

        <option ng-repeat="item in [[${searchable.id}]].querySearch(searchText)"
                ng-value="item.value">

    </datalist>

The data loads correctly but the on change does nothing.