title: AngularJS - Blur delay
body: <p>I have the following:</p>
  
  <pre><code>&lt;div class="staff"&gt;
  
      &lt;input ng-model="user" 
              ng-focus="isFocused = true;"
              ng-blur="isFocused = false;/&gt;
  
      &lt;div class="matches" ng-if="isFocused"&gt;
          &lt;div class="user" 
              ng-repeat="match in users | filter:user" 
              ng-bind="match"
              ng-click="user = match"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>With my directive on <code>.staff</code>. Basically, we have an input field. When you start typing, it shows the matches. I want to then click a match and that should update <code>ng-model='user'</code>. </p>
  
  <p>Right now this doesn't work, because <code>ng-focus</code> quickly hides the <code>.matches</code> (that is, when you want to click on a <code>.match</code>, then you have blurred out of the input, so <code>isFocused</code> becomes <code>false</code>).</p>
  
  <p>My solution currently is to rely on the directive <code>element.bind()</code> for the focus and blur, and basically delay the action. </p>
  
  <p>So, in my current implementation, the <code>input</code> tag is simply <code>&lt;input ng-model="user"/&gt;</code> and my directive's <code>link</code> is</p>
  
  <pre><code>link: function(scope, element, attrs)
  {
      element.bind('focus', function()
      {
          scope.isFocused = true;
      });
  
      element.bind('blur', function()
      {
          $timeout(function() 
          {
              scope.isFocused = false;
          }, 125);
      });
  }
  </code></pre>
  
  <p>I really prefer the first option. Is there anything I can do?</p>