Quel est le meilleur moyen d'annuler la propagation d'événements entre des appels ng-click imbriqués ?

Question

Voici un exemple. Disons que je veux avoir une image superposée comme sur beaucoup de sites. Ainsi, lorsque vous cliquez sur une vignette, une superposition noire apparaît sur l'ensemble de votre fenêtre, et une version plus grande de l'image est centrée dans celle-ci. En cliquant sur la superposition noire, vous la faites disparaître ; en cliquant sur l'image, vous appelez une fonction qui affiche l'image suivante.

Le html :

<div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()">
    <img src="http://some_src" ng-click="nextImage()"/>
</div>

Le javascript :

function OverlayCtrl($scope) {
    $scope.hideOverlay = function() {
        // Some code to hdie the overlay
    }
    $scope.nextImage = function() {
        // Some code to find and display the next image
    }
}

Le problème est qu'avec cette configuration, si vous cliquez sur l'image, les deux nextImage() et hideOverlay() sont appelés. Mais ce que je veux, c'est que nextImage() pour être appelé.

Je sais que vous pouvez capturer et annuler l'événement dans la section nextImage() comme ceci :

if (window.event) {
    window.event.stopPropagation();
}

...Mais je veux savoir s'il existe une meilleure façon de faire en AngularJS qui ne m'oblige pas à préfixer toutes les fonctions sur les éléments à l'intérieur de la superposition avec ce snippet.