title: show when onFocus and hide and onBlur combined in angular js
body: <p>I am having a <strong>input box</strong> which has a list of <strong>suggestions</strong> for it. I want that suggestions to be only showed <em>when the input box is focused by cursor &amp; hide the suggesions when the cursor removed from input box.</em></p>
  
  <p>currently i am doing it in a difficult way like below.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;input ngFocus="showSuggesions('div_id') ng-blur="hideSuggesions('div_id')" &gt; 
  </code></pre>
  
  <p><strong>JavaScript</strong>  </p>
  
  <pre><code>    $scope.showSuggessions = function(div_id){
         document.getElementById(div_id).style.display = "block";
      }
      $scope.hideSuggessions = function(div_id){
         document.getElementById(div_id).style.display = "none";
      }
  </code></pre>
  
  <p>What i want is that </p>
  
  <pre><code>&lt;input ngFocus=( iftrue ? ngShow.div_id : ngHide.div_id )&gt;
  </code></pre>
  
  <p>I am new to angularJS, I thought doing it in a simple way would making this code more readable. I don't know angulaJS's many of the features. If this question is totally senseless I am sorry.</p>