title: What's the best way to cancel event propagation between nested ng-click calls?
body: <p>Here's an example.  Let's say I want to have an image overlay like a lot of sites.  So when you click a thumbnail, a black overlay appears over your whole window, and a larger version of the image is centered in it.  Clicking the black overlay dismisses it; clicking the image will call a function that shows the next image.</p>
  
  <p>The html:</p>
  
  <pre><code>&lt;div ng-controller="OverlayCtrl" class="overlay" ng-click="hideOverlay()"&gt;
      &lt;img src="http://some_src" ng-click="nextImage()"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>function OverlayCtrl($scope) {
      $scope.hideOverlay = function() {
          // Some code to hdie the overlay
      }
      $scope.nextImage = function() {
          // Some code to find and display the next image
      }
  }
  </code></pre>
  
  <p>The problem is that with this setup, if you click the image, both <code>nextImage()</code> and <code>hideOverlay()</code> are called.  But what I want is for only <code>nextImage()</code> to be called.</p>
  
  <p>I know you can capture and cancel the event in the <code>nextImage()</code> function like this:</p>
  
  <pre><code>if (window.event) {
      window.event.stopPropagation();
  }
  </code></pre>
  
  <p>...But I want to know if there's a better AngularJS way of doing it that won't require me to prefix all of the functions on elements inside the overlay with this snippet.</p>