title: Angular UI Bootstrap dropdown transition
body: <p>Total rookie to both Stack Overflow &amp; AngularJS here. I'm trying to add a fade-in animation to my dropdown (from UI Bootstrap's dropdown directive) but to no avail. </p>
  
  <p>This is very similar to this question:
  <a href="https://stackoverflow.com/questions/25876195/bootstrap-3-dropdown-transition">Bootstrap 3 dropdown transition</a>
  , but I'm wondering if there's an Angular (non-jQuery) way to this? </p>
  
  <p>Excited to be asking my first ever question on here.</p>
  
  <p>Here's the code I'm using (which is pulled from UI Bootstrap's default Dropdown):</p>
  
  <pre><code>&lt;div class="btn-group" dropdown is-open="status.isopen"&gt;
      &lt;button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"&gt;
        Button dropdown &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
        &lt;li class="divider"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And here's the plunker: <a href="http://plnkr.co/edit/CmAZv4DTeda4X0bnkQwQ" rel="nofollow noreferrer">http://plnkr.co/edit/CmAZv4DTeda4X0bnkQwQ</a></p>