UI Bootstrap Anchor doesn't work inside Accordion Heading

Question

I am using Angular Bootstrap (UI Bootstrap), but I am having trouble with the accordion header. It seems that the toggle functionality overrides anchor elements in the accordion heading so that links are not clickable. For example:

<uib-accordion close-others="false">
    <uib-accordion-group is-open="status.open" ng-repeat="p in model.processing>
        <uib-accordion-heading>
            <a href="http://www.google.com">go to google</a>
        </uib-accordion-heading>
        TEXT
    </uib-accordion-group>
</uib-accordion>

Clicking on the "go to google" link toggles the accordion and does not go to the link. I can solve this with an ng-click, but then the issue is that I want middle click to still work for creating a new tab.

Answer 1

I finally figured it out. Just needed to add ng-click="$event.stopPropagation();" to the anchor.