La directive autocompelete JS angulaire utilisant l'interface utilisateur Jquery ne fonctionne pas comme prévu dans IE

Vous trouverez ci-dessous une directive personnalisée Angular pour l'achèvement automatique à l'aide de jquery-ui. Cela fonctionne très bien dans Chrome, Firefox et d'autres navigateurs mais dans IE. J'ai même utiliséLa directive autocompelete JS angulaire utilisant l'interface utilisateur Jquery ne fonctionne pas comme prévu dans IE

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Pour des problèmes de compatibilité. Mais voici ce qui est réellement le problème est que lorsque je tape dans la zone de texte, il montre les options auto complète comme prévu. Mais lorsque j'ai sélectionné l'une des options, le texte de la zone de texte change aussi la valeur de la zone de texte change si vous essayez d'y accéder en utilisant jquery/javascript. Mais la variable de portée n'est pas mise à jour. Dans Chrome et Firefox, il est mis à jour comme prévu. Mais pas dans IE. Tout ce que je tape est seulement reflété dans la variable de portée. Quelqu'un peut-il m'aider à comprendre la raison de ce problème et comment résoudre ce problème.

var App=angular.module('App',[]); 
 
App.directive('complete', function ($timeout) { 
 
    return function (scope, iElement, iAttrs) { 
 
     iElement.autocomplete({ 
 
      source: scope[iAttrs.uiItems], 
 
      select: function() { 
 
       $timeout(function() { 
 
        iElement.trigger('input'); 
 
       }, 10); 
 
      } 
 
     }); 
 
    }; 
 
}); 
 
App.controller('HomeController', function($rootScope, $scope, $timeout) { 
 
$scope.list = ['Python', 'MySQL', 'NodeJS', 'Oracle', 'PHP', 'AngularJS', 'Bootstrap', 
 
     'C', 'C++', 'C#', 'CSS', 'HTML5', 'Java', 'JavaScript', 'jQuery', 'Perl', 'SQL', 'VB.NET', 
 
     'ASP.NET', 'Unix', 'Shell Scripting', 'MSSQL', 'PL/SQL', 'CATIA', 'AutoCad', 'Visual Basic', 'Creo']; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 

 
<div ng-app="App"> 
 
    <div id="map" ng-controller="HomeController"> 
 
    <div> 
 
    {{selectedItem}} 
 
    </div> 
 
    <input complete ui-items="list" ng-model="selectedItem"/> 
 

 
    </div> 
 
</div>

Voici le violon pour le même essayer ce violon dans IE pour observer la question

Fiddle

Captures d'écran: