title: Angularjs jquery UI autocomplete
body: <p>I'm trying to implement jquery's autocomplete in an Angular directive. The data I'm receiving for source is coming from websocket response. It's not working and I think response delay is causing the issue here. </p>
  
  <p>I'll appreciate if someone could shed some light on code below. Is there any elegant technique to achieve this using some kind of request/response or promise?</p>
  
  <pre><code>app.directive('autoComplete', function($rootScope, locationAutoCompleteService, $timeout, $http, programLocationModel ) {
      return {
          restrict: 'A',
  
          scope: {
  
              serviceType: '@serviceType'
          },
  
          link: function(scope, elem, attr, ctrl) {
  
              var autoItem = [];
  
              scope.change = function () {
  
                  locationAutoCompleteService.unSubscribe();
  
                  var service = locationAutoCompleteService.getServiceDefinition();
  
                  service.filters.pattern = scope.inputVal;
  
                  locationAutoCompleteService.subscribe();
  
              };
  
              scope.$on('myData', function(event, message){
  
                  if ( message !== null &amp;&amp; message.results !== null) {
  
                      autoItem = [];
  
                      for ( var i = 0; i &lt; message.results.length; i++) {
  
                          autoItem.push({ label: message.results[i].name, id: message.results[i].id });
                      }
  
                  }
  
              });
  
              elem.autocomplete({
  
                  source: autoItem,
                  select: function( event, ui ) {
  
                      $timeout(function() {
  
                          elem.trigger('input');
  
                      }, 0);
  
                  }
              });
          }
      };
  });
  </code></pre>