How to exclude an element from ng-click action

Question

I have an element inside a container with ng-click, that should not execute this click action. It has the structure similar to this:

<div class="container" ng-click="takeSomeAction()>
    <p>Some content</p>
    <a class="btn" ng-href="#{{whatever}}">button content</a>
</div>

How to prevent executing takeSomeAction() when you click the button?

Answer 1

You need to stop the event propagation, which can be done very easily with another ng-click.

<div class="container" ng-click="takeSomeAction()>
    <p>Some content</p>
    <a class="btn" ng-href="#{{whatever}}" ng-click="$event.stopPropagation()">button content</a>
</div>

It will prevent the routine execution while following the href.