I have code like the following:
<div class="dropdown" ng-model="opened">
<span class="dropdown-button" data-toggle="dropdown" ng-click="opened=!opened"><i class="fa" ng-class="{'fa-minus':opened, 'fa-plus':!opened}"></i></span>
<div class="dropdown-menu">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
</div>
On page load the dropdown is hidden and the fa-plus icon is displayed. If the plus icon is clicked I update the 'opened' model variable so that the fa-minus icon is displayed. But also the data-toggle add the 'open' class to my 'dropdown' div.
When the minus icon is clicked the reverse happens and everything is good.
However, if when the menu is opened I click on another part of the page, the data-toggle will cause the 'open' class to be removed from the div, the dropdown is not displayed any longer. But my angular model 'opened' is not modified so the fa-minus icon is still displayed.
Can anyone tell me how I can monitor for the addition of the 'open' class to the div, or any underlying event that I can hook into so that I can update the angular 'opened' model variable when this happens??