¿Por qué una entrada de Autocompletar no actualiza el modelo correctamente?

Estoy usando las siguientes dependencias:

  • angularJS v1.5.5
  • jquery v1.12.4
  • jquery-ui v1.12.1
  • jQuery Autocompletar plugin v1.2.6

Entonces defino la directiva así:

.directive('autoComplete', [ '$timeout', function($timeout) { return function(scope, element, attrs) { var auto; auto = function() { $timeout((function() { if (!scope[attrs.uiItems]) { auto(); } else { element.autocomplete({ source: [scope[attrs.uiItems]] }); } }), 0); }; return auto(); }; } ]) 

que tomé prestado de la respuesta a esta pregunta . La función de autocompletar funciona en su mayor parte, pero cuando me muevo a través de las combinaciones con el teclado y presiono regresar o hago clic en la combinación con el mouse, el modelo se actualiza solo con la parte que escribí y no con el elemento completo seleccionado. ¿Dónde debería mirar para arreglar esto? ¿Es un error en el plugin? ¿directiva? mi definición de entrada?

 $scope.ccyPairs = [ "USDCHF", "CHFUSD", "USDEUR", "EURUSD", "USDGBP", "GBPUSD", "USDJPY", "JPYUSD", "CHFEUR", "EURCHF", "CHFGBP", "GBPCHF", "CHFJPY", "JPYCHF", "EURGBP", "GBPEUR", "EURJPY", "JPYEUR", "GBPJPY", "JPYGBP" ];  

Cuando lo hago:

 $scope.$watch("ccyPair", function(newValue, oldValue) { console.log(newValue); }, false); 

Veo que el modelo se actualiza solo con la parte que escribo en la entrada y no con la coincidencia completa seleccionada en la lista, ya sea seleccionándola con un clic del mouse o moviéndome a través de las coincidencias y presionando Enter.

Por ejemplo, en la imagen a continuación, el modelo se actualiza solo a USD y no a la coincidencia completa de CHFUSD .

introduzca la descripción de la imagen aquí

De acuerdo, después de mucha agonía, me arrastré hasta una solución funcional 🙂

 .directive('autoComplete', [ '$timeout', function($timeout) { return { require: 'ngModel', link: function($scope, element, attrs, ctrl) { var fAutoComplete; fAutoComplete = function() { $timeout(function() { if (!$scope[attrs.uiItems]) { fAutoComplete(); } else { element.autocomplete({ source: [$scope[attrs.uiItems]] }).on('selected.xdsoft', function(e, newValue) { ctrl.$setViewValue(newValue); $scope.$apply(); }); } }, 5); }; return fAutoComplete(); } }; } ])