title: Angularjs autocomplete ng-click does not work
body: <p>I'm trying to write autocomplete in Angularjs. It works for me except the click on the suggestion. From the console log it looks like whenever I click on the suggestion, ng-blur of the input element is called as it input element loses focus and ng-click is never called. Can anybody suggest a solution here?</p>
  
  <p>Here is my code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Autocomplete&lt;/title&gt;
      &lt;style&gt;.wrapper {display: none;}.wrapper ul {list-style-type: none;}.wrapper li {padding: 5px;line-height: 25px;cursor: pointer;}&lt;/style&gt;
      &lt;!-- Angular JS --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="MyApp"&gt;
  
      &lt;div ng-controller="SuggestionCtrl"&gt;
          &lt;form action="/index.html"&gt;
              &lt;input type="search" name="q"  autocomplete="off" 
                  ng-model="q" 
                  ng-focus="showSuggesions()"
                  ng-blur="hideSuggesions()" 
                  ng-change="getSuggestion()"&gt;
              &lt;div class="wrapper"
                  ng-if="hasSuggestions"
                  ng-style="suggestionStyle"&gt;
                  &lt;ul&gt;
                      &lt;li ng-repeat="suggestion in suggestions"
                          ng-click="search(suggestion)"&gt;
                          {{suggestion}}
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var app = angular.module("MyApp", []);
  app.controller("SuggestionCtrl", function ($scope) {
  
      $scope.suggestions = ["India", "United States", "England", "Australia"];
  
      $scope.showSuggesions = function () {
          $scope.suggestionStyle = { display: "block", 'background-color': '#ddd' };
      };
  
      $scope.hideSuggesions = function () {
          $scope.suggestionsVisible = false;
          $scope.suggestionStyle = { display: "none" };
          console.log('hideSuggestions called');
      };
  
      $scope.hasSuggestions = function(){
          return $scope.suggestions.length &gt; 0;
      }
  
      $scope.getSuggestion = function () {
          // get suggestions from api
      };
  
      $scope.search = function (suggestion) {
          window.location = window.location + "?q=" + suggestion;
      };
  });
  </code></pre>