title: How to prevent parent click event when the user clicks on his child element? AngularJS
body: <p>I have a <code>&lt;div&gt;</code> with a <code>ng-click</code> but this <code>&lt;div&gt;</code> have a <strong>child element</strong> with also a <code>ng-click</code> directive.
  The problem is that the <strong>click event on the child element</strong> trigger <strong>also</strong> the <strong>click event of the</strong> <strong>parent element</strong>.</p>
  
  <p>How can I prevent the parent click event when I click on his child?</p>
  
  <p><a href="http://jsfiddle.net/qu86oxzc/2/">Here is a jsfiddle</a> to illustrate my situation.</p>
  
  <p>Thank you in advance for your help.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;body ng-app ng-controller="TestController"&gt;
  &lt;div id="parent" ng-click="parentClick()"&gt;
      &lt;div id="child" ng-click="childClick()"&gt;&lt;/div&gt;
  
      &lt;p ng-bind="elem"&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div&gt;&lt;p style="text-align:center" ng-bind="childElem"&gt;&lt;/p&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
  function TestController($scope) {
      $scope.parentClick = function() {
          $scope.elem = 'Parent';
      }
  
      var i = 1;
      $scope.childClick = function() {
          $scope.elem = 'Child';
          $scope.childElem = 'Child event triggered x' + i;
          i++;
      }
  }
  &lt;/script&gt;
  </code></pre>