title: How do I add a delay for hovering an element in angularjs?
body: <p>I have an element:</p>
  
  <pre><code>    &lt;span ng-mouseenter="showIt()" ng-mouseleave="hideIt()"&gt;Hover Me&lt;/span&gt;
      &lt;div class="outerDiv" ng-show="hovering"&gt;
          &lt;p&gt;Some content&lt;/p&gt;
          &lt;div class="innerDiv"&gt;
              &lt;p&gt;More Content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is the JS:</p>
  
  <pre><code>// mouseenter event
  $scope.showIt = function () {
      $scope.hovering = true;
  };
  
  // mouseleave event
  $scope.hideIt = function () {
      $scope.hovering = false;
  };
  </code></pre>
  
  <p>And I want to be able to set a 500ms delay on the hover event.</p>
  
  <p>I already had an answer to this question, but I can't post it for another 8 hours. I'll be back!</p>