Trigger a click to first element of first element in ng-repeat in controller

Question

Hii i need to trigger a click in first elements #first > #second > #third > .element-for-trigger-click , see here

<div id="first" ng-repeat="competition in prematchGameViewData track by competition.id">
    <div id="header">...</div>
    <div id="details">...</div>


    <div id="second" ng-repeat="(groupDate, groupGames) in competition.gamesGroupedByDate">     
        <div id="third" ng-repeat="prematchGame in groupGames track by prematchGame.id">
            <div class="element-for-trigger-click"></div>
            ...
        </div>
    </div>
</div>

Question : How can i get event from Left controller ,find .element-for-trigger-click and trigger a click on right controller with native js .

Answer 1

Aro,

so in following thread you can find information how to 'simulate' click event via native JS on given element (tough by id)

How to simulate a click with JavaScript?

however I really would not recommend that kind of approach, especially if you use angularJS, as there are ways to do controller to controller communication with angular lib itself like:

• using of angular event bus ($emit, $broadcast and $on)
• using a services
• using pattern of state container like redux ( https://github.com/reactjs/redux )
• and probably few more.

Answer 2

You can dispatch a click event with:

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 1, 0, 0, 0, 0,
    false, false, false, false, 0, null);

var target = document.getElementById('third').firstChild;
target.dispatchEvent(evt);

Btw, you wouldn't have to use .firstChild if you simply gave that element an ID like all your other elements.