AngularJs ngclick在onchange之前触发

Question

In my application, there are two elements. one is autocomplete element and another one is button.

My problem is, In desktop chrome - jquery onChange of autocomplete element [#COUNTRY_LIST] fires below button ng-click. but in Android mobile chrome, ng-click fires first and calls onChange. Is there any way to prevent onChange when ng-click fires.

Auto Complete element and its ID is COUNTRY_LIST

<input type="text" ng-model="data.ctList" id="COUNTRY_LIST" placeholder="Key in to auto search"/>

$(document).on("change","#COUNTRY_LIST", function (e) {
   var $scope = angular.element(document.getElementById("DATA")).scope();
    $scope.$apply(function() {
        // make clear selected country list

        // In desktop chrome - this function calls before COUNTRY_LIST change
        // In Android mobile chrome - this function calls afterCOUNTRY_LIST change

    });
});

Next Button element

<button type="button" ng-click="callNext()">Next</button>

$scope.callNext= function() {
    // In Android mobile chrome - this function calls before COUNTRY_LIST change
    // In desktop chrome - this function calls after COUNTRY_LIST change
}

Answer 1

Try using Typeahead (ui.bootstrap.typeahead). Refer Docs