title: How to open bootstrap dropdown menu on page load using ONLY AngularJS? (Absolutely NO jQuery)
body: <p>AngularJS &amp; Bootstrap greenhorn here with a question regarding bootstrap dropdown menus. I've been trying to modify a page where the dropdown menu is automatically open upon page load (as requested by our customer). I found <a href="https://stackoverflow.com/questions/20495374/bootstrap-dropdown-open-on-pageload">this question</a> exactly the same as what I want to achieve, however the accepted solution uses jQuery, and we're absolutely forbidden to use jQuery. :(</p>
  
  <p>When I tested the page using Firefox &amp; IE, I noticed that the div under the &lt;-- Single Button --> comment becomes:</p>
  
  <pre><code>&lt;div class="btn-group dropdown ng-animate open" is-open="status.isopen" uib-dropdown="" data-ng-animate="2"&gt;
  </code></pre>
  
  <p>... so I tried adding the "open" class using ng-class and some conditional expressions (based from <a href="http://www.bootply.com/lfXdoOsBRc" rel="nofollow noreferrer">this link</a>) but it didn't work.</p>
  
  <p>Is there any workaround for this that utilizes AngularJS or CSS? I've been trying to solve this for a long time now, without much success.</p>
  
  <p>Thank you in advance.</p>
  
  <hr>
  
  <p>Code snippet:</p>
  
  <pre><code>&lt;div class="col-xs-12 col-xs-12 c col-sm-4 col-md-3 col-lg-3 headerDivision" ng-controller="ctrlDropdown"&gt;
      &lt;ul class="nav navbar-nav headerNavStyle"&gt;
          &lt;li class="menu-item" style="margin-top:15px"&gt;
              &lt;!-- Single button --&gt;
              &lt;div class="btn-group" uib-dropdown is-open="status.isopen"&gt;
  
              &lt;!-- Hamburger menu --&gt;
              &lt;img uib-dropdown-toggle ng-disabled="disabled" ng-click="isMainMenu=true; isSubMenu=resetMenu(); getLinks(); bStopPropagation=true;" src="burger.png"&gt;
  
              &lt;!-- Main menu --&gt;
              &lt;ul uib-dropdown-menu role="menu" aria-labelledby="single-button" ng-click="bStopPropagation &amp;&amp; $event.stopPropagation()"&gt;
  
              &lt;!-- Main Menu --&gt;
              &lt;li role="menuitem" class="main-menu-item" ng-repeat="link in links" ng-click="whatMenu(link.name); isSubMenu=false;" ng-show="isMainMenu"&gt;
              &lt;img id="{{link.icon}}"&gt;{{link.name}}&lt;img class="navi-expand-icon"&gt;
              &lt;/li&gt;
              &lt;!-- End Main Menu --&gt;
  </code></pre>