JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.0.8/angular.js"></script>
<div ng-app="test">
<div ng-controller="MainCtrl">

    Autcomplete field:
    <input type="text"  ng-change="Test();" ng-model="view.fld"  autocomplete="off" auto-complete autocomplete-opt="opts" size="28">

    <br>
        
        model: <b>{{view.fld}}</b>
    
</div>
</div>

JavaScript

var app  = angular.module('test', []);
app.directive('autoComplete', function() {
    return {
        scope: { 'uiSrc': '@', 'ngModel': '=', 'autocompleteOpt':'=', 'ngChange':'&'},
        require: "ngModel",
        link: function(scope, el, attrs, ngModelCtrl) {
            ngModelCtrl.$viewChangeListeners.push(function() {
                      //scope.$eval(attrs.ngChange);
                        scope.ngChane.call();
                    });
            el.autocomplete({
                source: scope.autocompleteOpt,
                select: function(event, ui) {
                    event.preventDefault();
                    el.val(ui.item.label);
                    scope.$apply(function() {  scope.ngModel = el.val(); });
                }
            });
        }
    };
});
function MainCtrl($scope) {
    $scope.view = { fld: '' };
    $scope.Test = function(){
        $scope.opts.push(Math.random()*100);
    }
    $scope.opts = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];

}