title: Angular ng-repeat, ng-mouseenter, ng-mouseleave
body: <p>So I've got this repeated element...</p>
  
  <pre><code>&lt;div ng-repeat="folder in user.mediaFolders | orderBy:'id'" class="pull-left media-folder"&gt;
      &lt;div class="folder-name"&gt;{{folder.name}}&lt;/div&gt;
      &lt;div class="folder-body"&gt;
          &lt;i class="fa fa-picture-o text-muted"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="popunder"&gt;
          &lt;div class="popunder-caret"&gt;&lt;/div&gt;
          &lt;div class="popunder-body"&gt;
              &lt;i class="fa fa-trash-o pull-left"&gt;&lt;/i&gt;
              &lt;i class="fa fa-cloud-upload pull-right"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The nested div with the popunder class should show when mouseover and hide with mouseout.  I would write this in jQuery as so...</p>
  
  <pre><code>$('.media-folder').hover(
      function(){
          $(this).find('.popunder').show();
          return false;
      },
      function(){
          $(this).find('.popunder').fadeOut('fast');
          return false;
      }
  );
  </code></pre>
  
  <p>How would I do this the Angular way?</p>