title: Problems with jQuery autocomplete + AngularJS
body: <p>i'm using AjgularJS on my page and want to add a field to use autocomplete from jqueryui and the autocomplete does not fires the ajax call.</p>
  
  <p>i've tested the script on a page without angular (ng-app and ng-controller) and it works well, but when i put the script on a page with angularjs it stops working.</p>
  
  <p>any idea?</p>
  
  <p>jquery script:</p>
  
  <pre><code>$(function () {
  
      $('#txtProduct').autocomplete({
          source: function (request, response) {
  
              alert(request.term);
  
          },
          minLength: 3,
          select: function (event, ui) {
  
          }
      });
  
  });
  </code></pre>
  
  <ul>
  <li>interesting note: when i call the script on Chrome inspector the autocomplete starts working!!!</li>
  <li>Versions: AngularJS: 1.0.2 - JqueryUI: 1.9.0</li>
  </ul>
  
  <p><strong>CONCLUSION:</strong>
  The autocomplete widget from jQueryUI must be initializes from inside a custom directive of AngularJS as the example:</p>
  
  <p><strong>Markup</strong></p>
  
  <pre><code>&lt;div ng-app="TestApp"&gt;
      &lt;h2&gt;index&lt;/h2&gt;
      &lt;div ng-controller="TestCtrl"&gt;
  
          &lt;input type="text" auto-complete&gt;ddd&lt;/input&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Angular script</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      var app = angular.module('TestApp', []);
  
      function TestCtrl($scope) { }
  
      app.directive('autoComplete', function () {
          return function postLink(scope, iElement, iAttrs) {
  
              $(function () {
                  $(iElement).autocomplete({
                      source: function (req, resp) {
                          alert(req.term);
                      }
                  });
              });
  
          }
      });
  
  &lt;/script&gt;
  </code></pre>