How to exclude an element from ng-click action

Problem

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?

Problem courtesy of: Frizi

Solution

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.

Solution courtesy of: Frizi

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.