Angularjs ng-model doesn't work with input number type and arrow keys in Edge

Issue

I have a input with type="number", it is associated with a ng-model.I want to be able to press up and down arrows to update its value. However in Microsoft Edge the ng-model is not updated in this case, see my example here:

https://plnkr.co/edit/yZaGxkYG87C1YCNSKnf0?p=preview

Is there a way of updating the model, that's not using jquery? We want to avoid using jquery in controllers

Solution

So it's a bug from both angularjs and Edge, as seen in the discussion below:

https://github.com/angular/angular.js/issues/15366

A snippet is proposed to fix the problem by oneself:

.directive('input', () => {
  if(currentBrowser!="edge") return {};

  return {
    link: (scope, elem) => {
      if (elem[0].type === 'number') {
        elem.on('keydown', evt => {
          switch (evt.which) {
            case 38:   // UP_ARROW
            case 40:   // DOWN_ARROW
              scope.$evalAsync(() => elem.triggerHandler('change'));
              break;

          }
        });
      }
    }
  };
});

Answered By - Xun Yang