AngularJs - Opening a Bootstrap dropdown menu on page load by programmatically triggering the "click" event (NO jQuery)
<p>May I ask if it's possible to trigger the click event of a dropdown menu programmatically on page load using AngularJS? </p>

<p>What I want to happen is that after loading the page, my navigation menu gets displayed automatically. </p>

<p>This is what I have so far:</p>

<pre><code>&lt;li class="menu-item" style="margin-top:15px"&gt;

&lt;!-- Single button --&gt;
    &lt;div class="btn-group open" uib-dropdown is-open="status.isopen"&gt;

        &lt;!-- Hamburger menu --&gt;

        &lt;img ng-init="displayMainMenu()" id="nav-burger" uib-dropdown-toggle ng-disabled="disabled" ng-click="sMainMenu=true; isSubMenu=resetMenu(); getLinks(); bStopPropagation=true;" src="img/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;

        &lt;/ul&gt;

     &lt;/div&gt;
&lt;/li&gt;
</code></pre>

<p>And this is my Angular JS code:</p>

<pre><code>$scope.displayMainMenu = function () {
    var domElement = document.getElementById('nav-burger');

    alert('before timeout');   // &lt;-- This gets triggered

    $timeout(function () {
        angular.element(domElement).triggerHandler('click');
    }, 0);

    alert('after timeout');    // &lt;-- This doesn't get triggered...
}
</code></pre>

<p>I have a feeling that I'm really close, however I couldn't figure out why it's not working. </p>

<p>Thank you in advance for your replies.</p>