Bootstrap issue with dropdown toggle in Angular app

Question

I am using the Bootstrap library and when I click the dropdown-toggle class this will show/hide the dropdown as expected (hence why its called toggle).

If I click the the image at the bottom of the HTML snippet this will activate the ng-click angular directive found in the javascript code.

This code simply does a check to see if the dropdown menu is displayed by checking to see if the .dropdown class has a class of 'open'. If not, then it will open the url passed in a new window, otherwise it will remove the 'open' class which hides the dropdown menu.

The issue I have is if I try to click the same .dropdown class to activate the dropdown again it only appears after I click two more times??

I'm obviously not doing the correct way to destroy the dropdown by removing the 'open' class can anyone suggest what I am doing wrong? If i don't click the image (and therefore not activate the ng-click this all works fine), so the issue is related to the doInteractionBodyEvent() and somehow i'm not 'destroying' the dropdown correctly.

// HTML

<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
   <span class="material-icons">more_vert</span>
</div>

<div>
    <div ng-if="interaction.media[0].image" class="image">
      <a ng-click="doInteractionBodyEvent(interaction.media[0].href)">
        <img ng-src="{{interaction.media[0].image.replace('amp;','')}}" />
      </a>
    </div>
</div>

// Javascript Angular Controller

$scope.doInteractionBodyEvent = function(url) {
    if (angular.element('.dropdown').hasClass('open')) {
        angular.element('.dropdown').removeClass('open');

    } else {
        $window.open(url, '_blank');
    }
}

Answer 1

Remove the data-toggle="dropdown" from the HTML

<div class="dropdown-toggle" type="button" id="dropdown1"  aria-haspopup="true" aria-expanded="true">
   <span class="material-icons">more_vert</span>
</div>