title: How to get selected value from ng-autocomplete directive to controller
body: <p>I am using a directive for auto complete / auto suggest in angular Js taken from <a href="http://demo.jankuri.com/ngAutocomplete/" rel="nofollow">http://demo.jankuri.com/ngAutocomplete/</a>. It is working fine getting the data from server and filtering it. But I am facing problem into select and use that select item from the auto complete.
  Here is the code of directive what I am using for this...</p>
  
  <pre><code>app.factory('ngAutocompleteService', ['$http', function($http) 
  {
      var self = this;
      self.getData = function (url, keyword) {
          return $http.get(url, { query: keyword });
      };
  
      return self;
  }])
  
  app.directive('ngAutocomplete', ['$timeout','$filter','ngAutocompleteService', 
  
  function($timeout, $filter, ngAutocompleteService)
   {
  
      'use strict';
  
      var keys = {
          left    : 37,
          up      : 38,
          right   : 39,
          down    : 40,
          enter   : 13,
          esc     : 27
      };
  
      var setScopeValues = function (scope, attrs) {
          scope.url = base_url+attrs.url || null;
          scope.searchProperty = attrs.searchProperty || 'skills';
          scope.maxResults = attrs.maxResults || 10;
          scope.delay = parseInt(attrs.delay, 10) || 300;
          scope.minLenth = parseInt(attrs.minLenth, 10) || 2;
          scope.allowOnlyResults = scope.$eval(attrs.allowOnlyResults) || false;
          scope.placeholder = attrs.placeholder || 'Search...';
      };
  
      var delay = (function() {
          var timer = 0;
          return function (callback, ms) {
              $timeout.cancel(timer);
              timer = $timeout(callback, ms);
          };
      })();
  
      return {
          restrict: 'E',
          require: '?ngModel',
          scope: true,
          link: function(scope, element, attrs, ngModel) {
              setScopeValues(scope, attrs);
  
              scope.results = [];
              scope.currentIndex = null;
  
              scope.getResults = function () {
                  if (parseInt(scope.keyword.length, 10) === 0) scope.results = [];
                  if (scope.keyword.length &lt; scope.minLenth) return;
  
                  delay(function() {
                      ngAutocompleteService.getData(scope.url, scope.keyword).then(function(resp) {
                          scope.results = [];
                          var filtered = $filter('filter')(resp.data, {skills: scope.keyword});
                          for (var i = 0; i &lt; scope.maxResults; i++) {
                              scope.results.push(filtered[i]);
                          }
                          scope.currentIndex = 0;
  
                          if (scope.results.length) {
                              scope.showResults = true;
                          }
                      });
                  }, scope.delay);
              };
  
              scope.selectResult = function (r) {
                  scope.keyword = r.skills;
                  ngModel.$setViewValue(r.skills);
                  scope.ngModel = r.skills;
                  ngModel.$render(); 
                  scope.showResults = false;
              };
  
              scope.clearResults = function () {
                  scope.results = [];
                  scope.currentIndex = null;
              };
  
              scope.hoverResult = function (i) {
                  scope.currentIndex = i;
              }
  
              scope.blurHandler = function () {
                  $timeout(function() {
                      if (scope.allowOnlyResults) {
                          var find = $filter('filter')(scope.results, {skills: scope.keyword}, true);
                          if (!find.length) {
                              scope.keyword = '';
                              ngModel.$setViewValue('');
                          }
                      }
                      scope.showResults = false;
                  }, 100);
              };
  
              scope.keyupHandler = function (e) {
                  var key = e.which || e.keyCode;
  
                  if (key === keys.enter) {
                      scope.selectResult(scope.results[scope.currentIndex]);
                  }
  
                  if (key === keys.left || key === keys.up) {
                      if (scope.currentIndex &gt; 0) {
                          scope.currentIndex -= 1;
                      }
                  }
  
                  if (key === keys.right || key === keys.down) {
                      if (scope.currentIndex &lt; scope.maxResults - 1) {
                          scope.currentIndex += 1;
                      }
                  }
  
                  if (key === keys.esc) {
                      scope.keyword = '';
                      ngModel.$setViewValue('');
                      scope.clearResults();
                  }
              };
          },
          template:
          '&lt;input type="text" class="form-control" ng-model="keyword" placeholder="{{placeholder}}" ng-change="getResults()" ng-keyup="keyupHandler($event)" ng-blur="blurHandler()" ng-focus="currentIndex = 0" autocorrect="off" autocomplete="off"&gt;' +
          '&lt;input type="hidden" ng-model="skillIdToBeRated"&gt;'+
          '&lt;div ng-show="showResults"&gt;' +
          '  &lt;div ng-repeat="r in results | filter : {skills: keyword}" ng-click="selectResult(r)" ng-mouseover="hoverResult($index)" ng-class="{\'hover\': $index === currentIndex}"&gt;' +
          '    &lt;span class="form-control"&gt;{{ r.skills }}&lt;/span&gt;' +
          '  &lt;/div&gt;' +
          '&lt;/div&gt;'
      };
  }]);
  </code></pre>
  
  <p>I am unable to get value which is selected by <em>ng-click="selectResult(r)"</em> function. The value is showing into text field but not getting it into controller.</p>