title: How to create a AngularJS jQueryUI Autocomplete directive
body: <p>I am trying to create a custom directive that uses jQueryUI's autocomplete widget.  I want this to be as declarative as possible.  This is the desired markup:</p>
  
  <pre><code>&lt;div&gt;
      &lt;autocomplete ng-model="employeeId" url="/api/EmployeeFinder" label="{{firstName}} {{surname}}" value="id" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, in the example above, I want the directive to do an AJAX call to the url specified, and when the data is returned, show the value calculated from the expression(s) from the result in the textbox and set the id property to the employeeId.  This is my attempt at the directive.</p>
  
  <pre><code>app.directive('autocomplete', function ($http) {
      return {
          restrict: 'E',
          replace: true,
          template: '&lt;input type="text" /&gt;',
          require: 'ngModel',
  
          link: function (scope, elem, attrs, ctrl) {
              elem.autocomplete({
                  source: function (request, response) {
                      $http({
                      url: attrs.url,
                      method: 'GET',
                      params: { term: request.term }
                  })
                  .then(function (data) {
                      response($.map(data, function (item) {
                          var result = {};
  
                          result.label = item[attrs.label];
                          result.value = item[attrs.value];
  
                          return result;
                      }))
                  });
                  },
  
                  select: function (event, ui) {                    
                      ctrl.$setViewValue(elem.val(ui.item.label));                    
  
                      return false;
                  }
              });
          }
      }    
  });
  </code></pre>
  
  <p>So, I have two issues - how to evaluate the expressions in the label attribute and how to set the property from the value attribute to the ngModel on my scope.</p>