Input With Datalist - Ng-change Is Not Fired In Ie For Angularjs

I have an input tag with datalist for which the ng-change is not getting fired on selection in Internet Explorer 11. It only gets fired on blur of the input. It is working in Chro

Solution 1:

To achieve expected result, use below option of oninput event for input field

<inputlist="testList"name="origin node"ng-model="SelectedDoctor"oninput = "angular.element(document.getElementById('check')).scope().LoadSessionData(this)"autocompletestListte="off"required /><datalistid="testList" >

ng-change is not fired because of the datalist on which ng-click or ng-change doesn't work

After assigning value to scope variable - selectedVal , run $scope.$apply() to see the selected option on the UI

code sample - https://codepen.io/nagasai/pen/jxVOrp

Solution 2:

AngularJS ignores the input event in Internet Explorer 11, because Microsoft's support for input is very buggy. However, you could implement your own directive and assign it to the element, in order to emit a change event yourself, whenever an input event occurs.

.directive('input', function() {
  return {
    link: function(scope, element, attrs) {
      element.on('input', function() { element.triggerHandler('change'); });
    }
  };
});

I do not recommend using the oninput attribute, because you should always stick with the ng-* attributes and not mix up AngularJS callbacks and native JavaScript event handlers. Using oninput, you might end up with other problems concerning the AngularJS data model.