AngularJS - ng-click over ng-click

Question

I have a html code like the following:

<div class="outerdiv" data-ng-click="resetText()">
    <div class="innerdiv" data-ng-click="showText()">
        {{ text }}
    </div>
</div>

An outer div with a ng-click and an inner div with a different ng-click.

My problem is: when I click the inner div, the outer one is being fired as well. What can I do to solve this (fire the inner function, not the outer one?

I can make it work using a hardcoded flag, but not sure if I'm in face of a race condition problem.

Here is a Fiddle illustrating the problem.

Answer 1

<div class="innerdiv" data-ng-click="showText($event)">

and in the controller

$scope.showText = function(event) {
    // whatever
    event.stopPropagation();
}

Answer 2

Try this

<div class="outerdiv" data-ng-click="resetText()">
    <div class="innerdiv" data-ng-click="showText();$event.stopPropagation()">
        {{ text }}
    </div>
</div>