Click function only for a particular span

Question

I have a twitter bootsrap dropdown ,

<button class="dropdown-toggle" data-toggle="dropdown" >
<span>Select</span>
<span class="pull-right" ng-click="showpopup();">Show popup</span>
</button>
<ul class="dropdown-menu">
...drop down.....

My issue is that clicking on showpopup function also dropdown will dsiplay .( i know it is because of part of drop down).I cannot move showpopup span outside of dropdown.

Clicking on showpopup function should not open drop-down.

Is there any way to achieve this .

Please suggest

Answer 1

You can try to stop propagation after your ng-click function being executed.

Like this:

<span class="pull-right" ng-click="showpopup(); $event.stopPropagation();">Show popup</span> 

This prevents the event from being propagated to the outer DOM elements.