is-open of dropdowns is not working with dynamic (ng-repeat) tabs

[initiatus]

http://plnkr.co/edit/fhQrZWOyEjkjKcbiP78k

The is-open directive is not working if being placed into tabs generated by ng-repeat. It is working good within static tabs and outside tabs though.

[Delapouite]

The problem lies in this condition :

    if ( openScope && openScope !== dropdownScope ) {
        openScope.isOpen = false;
    }

https://github.com/angular-ui/bootstrap/blob/master/src/dropdown/dropdown.js#L16-L18

which always close the dropdown menu as soon it's opened.

[austinpray]

Would love to PR but don't know what problem

bootstrap/src/dropdown/dropdown.js

Lines 16 to 18 in f13ed0f

	if ( openScope && openScope !== dropdownScope ) {
	openScope.isOpen = false;
	}

is solving.

[wesleycho]

That is not the source of the problem - did some investigation, and it turns out the dropdown directive instantiates twice.

[wesleycho]

Elaborating further, this appears to be because of the tab component - the tabset directive uses the tab-content-transclude directive, which copies the HTML of the content of the tab and moves it into a different element.

Here is a fork of the Plunker based off of master that demonstrates the problem.

[wesleycho]

I apologize, looks like my observation is incorrect - something really funky is going on. With each click, both dropdown buttons are toggling.

[wesleycho]

@sagorshkov great catch - will open PR with fix shortly.

[allnash]

I think the way I fixed it was this way for ng-repeat. when there is an <a> element, the ngTouch messes up with the elements and how they fire events.

HTML

<a ng-click="toggleDropdown($event)" id="project-participant-dropdown-[[participant.id]]" ng-repeat="participant in project.current_cycle.participants" uib-dropdown-toggle>
   <img alt="image" class="img-circle" ng-src="[[participant.image.url]]">
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="project-participant-dropdown-[[participant.id]]">
   <li role="menuitem">
     <a ng-click="removeParticipant(participant)">Remove</a>
   </li>
   <li>
      <a ng-click="messageParticipant(participant)">Message</a>
   </li>
</ul>

JS
  $scope.status = {
    isopen: false
  };


$scope.toggleDropdown = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.status.isopen = !$scope.status.isopen;
  };