title: How to set a value at angularjs autocomplete directive?
body: <p>I have a directive given below.</p>
  
  <pre><code>var app = anugular.directive('autocomplete', ['autocomplete-keys', '$window', '$timeout', function(Keys, $window, $timeout) {
          return {
              template: '&lt;input type="text" id="mm" class="autocomplete-input" placeholder="{{placeHolder}}"' +
                              'ng-class="inputClass"' +
                              'ng-model="searchTerm"' +
                              'ng-keydown="keyDown($event)"' +
                              'ng-blur="onBlur()" /&gt;' +
  
                          '&lt;div class="autocomplete-options-container"&gt;' +
                              '&lt;div class="autocomplete-options-dropdown" ng-if="showOptions"&gt;' +
                                  '&lt;div class="autocomplete-option" ng-if="!hasMatches"&gt;' +
                                      '&lt;span style="color:red;"&gt;No Matches Found&lt;/span&gt;' +
                                  '&lt;/div&gt;' +
  
                                  '&lt;ul class="autocomplete-options-list"&gt;' +
                                      '&lt;li class="autocomplete-option" ng-class="{selected: isOptionSelected(option)}" ' +
                                          'ng-style="{width: optionWidth}"' +
                                          'ng-repeat="option in matchingOptions"' +
                                          'ng-mouseenter="onOptionHover(option)"' +
                                          'ng-mousedown="selectOption(option)"' +
                                          'ng-if="!noMatches"&gt;' +
                                          '&lt;span&gt;{{option[displayProperty]}}&lt;/span&gt;' +
                                      '&lt;/li&gt;' +
                                  '&lt;/ul&gt;' +
                              '&lt;/div&gt;' +
                          '&lt;/div&gt;',
              restrict: 'E',
              scope: {
                  options: '=',
                  onSelect: '=',
                  displayProperty: '@',
                  inputClass: '@',
                  clearInput: '@',
                  placeHolder: '@'
              },
              controller: function($scope){
                  $scope.searchTerm = '';
                  $scope.highlightedOption = null;
                  $scope.showOptions = false;
                  $scope.matchingOptions = [];
                  $scope.hasMatches = false;
                  $scope.selectedOption = null;
  
                  $scope.isOptionSelected = function(option) {
                      return option === $scope.highlightedOption;
                  };
  
                  $scope.processSearchTerm = function(term) {
                      // console.log('ch-ch-ch-changin');
                      if (term.length &gt; 0) {
                          if ($scope.selectedOption) {
                              if (term != $scope.selectedOption[$scope.displayProperty]) {
                                  $scope.selectedOption = null;
                              } else {
                                  $scope.closeAndClear();
                                  return;
                              }
                          }
  
                          var matchingOptions = $scope.findMatchingOptions(term);
                          $scope.matchingOptions = matchingOptions;
                          if (!$scope.matchingOptions.indexOf($scope.highlightedOption) != -1) {
                              $scope.clearHighlight();
                          }
                          $scope.hasMatches = matchingOptions.length &gt; 0;
                          $scope.showOptions = true;
                      } else {
                          $scope.closeAndClear();
                      }
                  };
  
                  $scope.findMatchingOptions = function(term) {
                      return $scope.options.filter(function(option) {
                          var searchProperty = option[$scope.displayProperty];
                          if (searchProperty) {
                              var lowerCaseOption = searchProperty.toLowerCase();
                              var lowerCaseTerm = term.toLowerCase();
                              return lowerCaseOption.indexOf(lowerCaseTerm) != -1;
                          }
                          return false;
                      });
                  };
  
                  $scope.findExactMatchingOptions = function (term) {
  
  
                      return $scope.options.filter(function(option) {
                          var lowerCaseOption = option[$scope.displayProperty].toLowerCase();
                          var lowerCaseTerm = term.toLowerCase();
                          return lowerCaseOption == lowerCaseTerm;
                      });
                  };
  
                  $scope.keyDown = function(e) {
                      switch(e.which) {
                          case Keys.upArrow:
                              e.preventDefault();
                              if ($scope.showOptions) {
                                  $scope.highlightPrevious();
                              }
                              break;
                          case Keys.downArrow:
                              e.preventDefault();
                              if ($scope.showOptions) {
                                  $scope.highlightNext();
                              } else {
                                  $scope.showOptions = true;
                                  if ($scope.selectedOption) {
                                      $scope.highlightedOption = $scope.selectedOption;
                                  }
                              }
                              break;
                          case Keys.enter:
                              e.preventDefault();
                              if ($scope.highlightedOption) {
                                  $scope.selectOption($scope.highlightedOption);
                              } else {
                                  var exactMatches = $scope.findExactMatchingOptions($scope.searchTerm);
                                  if (exactMatches[0]) {
                                      $scope.selectOption(exactMatches[0]);
                                  }
                              }
                              break;
                          case Keys.escape:
                              $scope.closeAndClear();
                              break;
                      }
                  };
  
                  $scope.$watch('searchTerm', function (term) {
  
                      $scope.processSearchTerm(term);
  
                  });
  
                  $scope.highlightNext = function() {
                      if (!$scope.highlightedOption) {
                          $scope.highlightedOption = $scope.matchingOptions[0];
                      } else {
                          var currentIndex = $scope.currentOptionIndex();
                          var nextIndex = currentIndex + 1 == $scope.matchingOptions.length ? 0 : currentIndex + 1;
                          $scope.highlightedOption = $scope.matchingOptions[nextIndex];
                      }
                  };
  
                  $scope.highlightPrevious = function() {
                      if (!$scope.highlightedOption) {
                          $scope.highlightedOption = $scope.matchingOptions[$scope.matchingOptions.length - 1];
                      } else {
                          var currentIndex = $scope.currentOptionIndex();
                          var previousIndex = currentIndex == 0 ? $scope.matchingOptions.length - 1 : currentIndex - 1;
                          $scope.highlightedOption = $scope.matchingOptions[previousIndex];
                      }
                  };
  
                  $scope.onOptionHover = function(option) {
                      $scope.highlightedOption = option;
                  };
  
                  $scope.$on('simple-autocomplete:clearInput', function() {
                      $scope.searchTerm = '';
                  });
  
                  $scope.clearHighlight = function() {
                      $scope.highlightedOption = null;
                  };
  
                  $scope.closeAndClear = function() {
                      $scope.showOptions = false;
                      $scope.clearHighlight();
                  };
  
                  $scope.selectOption = function(option) {
  
                      $scope.selectedOption = option;
                      $scope.onSelect(option);
  
                      if ($scope.clearInput != 'False' &amp;&amp; $scope.clearInput != 'false') {
                          $scope.searchTerm = '';
                      } else {
                          $scope.searchTerm = option[$scope.displayProperty];
                      }
  
                      $scope.closeAndClear();
                  };
  
                  $scope.onBlur = function() {
                      $scope.closeAndClear();
                  };
  
                  $scope.currentOptionIndex = function() {
                      return $scope.matchingOptions.indexOf($scope.highlightedOption);
                  };
              },
              link: function(scope, elem, attrs) {
                  scope.optionWidth = '400px';
                  var inputElement = elem.children('.autocomplete-input')[0];
  
                  scope.setOptionWidth = function() {
                      // console.log(inputElement.offsetWidth);
                      $timeout(function() {
                          var pixelWidth = inputElement.offsetWidth &gt; 400 ? 400 : inputElement.offsetWidth - 2;
                          scope.optionWidth = pixelWidth + 'px';
                      });
                  };
  
                  angular.element(document).ready(function() {
                      scope.setOptionWidth();
                  });
  
                  angular.element($window).bind('resize', function() {
                      scope.setOptionWidth();
                  });
              }
          };
      }]).factory('autocomplete-keys', function () {
          return {
              upArrow: 38,
              downArrow: 40,
              enter: 13,
              escape: 27
          };
      });
  </code></pre>
  
  <p>At laravel 5 view page like this:</p>
  
  <pre><code>&lt;autocomplete options="allOrgData" ng-model="searchTerm"
                                        place-holder="Type Organization Name"
                                        on-select="onSelect"
                                        display-property="org_name"
                                        input-class="form-control"
                                        clear-input="false"&gt;
  &lt;/autocomplete&gt;
  </code></pre>
  
  <p>The list is loaded from:</p>
  
  <pre><code>$http.post("/api/getOrgForUserJson")
          .then(function(data){
                  $scope.allOrgData = data.data;
          })
  </code></pre>
  
  <p>when I type and get name, this method called as selected item:</p>
  
  <pre><code>$scope.onSelect = function(selection) {
          $scope.org_id = selection.id;
  
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yoDWi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yoDWi.png" alt=" display the console of selection on $scope.onSelect function "></a></p>
  
  <p><a href="https://i.stack.imgur.com/ogNHT.png" rel="nofollow noreferrer">view page</a>
  what the autocomplete does :
  When I type organization name, it shows drop down list of the matched organization name. Which is load from database. (pointed on image: No. 1)
  When I click on update button (pointed on image: No. 2), I need to set organization name to this autocomplete as selected value.</p>