Two nested click events with angularjs

Question

I have a HTML structure like this:

Answer 1

All you need to do is to stop event propagation/bubbling.

This code will help you:

ZZZZZ
    
XXXXX
    
YYYYYY
    ...

If your test and test2 functions would look as follows, you would get only test2 in your console when clicking on myId DIV. Without $event.stopPropagation() you would get test2 followed by test in the console output window.

$scope.test = function() {
    console.info('test');
}
$scope.test2 = function() {
    console.info('test2');
}