为什么我的AngularJS指令不能在Edge中工作？

Question

此代码在所有主流浏览器中都可以正常工作，但Edge仅在DOM检查器中显示有效值，但在页面仍然是旧值。为什么呢？

(function (angular, module) {

  'use strict';

  module
    .directive('psEffectsDurationSlider', EffectsDurationSlider);

  EffectsDurationSlider.$inject = [];

  function EffectsDurationSlider() {
    return {
      require:  'ngModel',
      restrict: 'E',
      link:     link
    };

    function link(scope, element, attrs, ngModel) {
      ngModel.$render = render;

      activate();

      function initializeSlider() {
        element.slider({
          min:         0.2,
          max:         2,
          step:        0.1,
          animate:     true,
          orientation: 'horizontal',
          range:       'min',
          slide:       onSliderChange
        });
      }

      function render() {
        element.slider('value', ngModel.$viewValue);
      }

      function onSliderChange(event, ui) {
        ngModel.$setViewValue(ui.value);
      }

      function onScopeDestroy() {
        element.slider('destroy');
      }

      function activate() {
        initializeSlider();

        scope.$on('$destroy', onScopeDestroy);
      }
    }
  }

})(window.angular, window.angular.module('...'));

Edge检查器中带有有效值的Edge的屏幕截图，页面上的结果无效：

Answer 1

尝试在$timeout中包装模型更新，因为滑块事件超出了角度上下文

 function onSliderChange(event, ui) {
    $timeout(function(){
        ngModel.$setViewValue(ui.value);
    });
  }

还需要注入$timeout