title: AngularJS - Button click contained in grid with ng-click event
body: <p><code>.html</code> </p>
  
  <pre><code>&lt;div class="col col-50"
      ng-repeat="col in row"
      ng-click="openProductDetails(col.prod_id);"&gt;
      &lt;button 
          ng-click="addToCart(col.prod_id);"&gt;
          Add to cart
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see I have a <code>grid</code> or <code>&lt;div&gt;</code> here which as <code>openProductDetails()</code> on click event. And inside the grid, I have a <code>button</code> which has an <code>addToCart()</code>. The problem is when I click the button, the <code>openProductDetails()</code> is also triggered. I cannot find a way to prevent the click event of the parent element when the button is clicked.</p>
  
  <p>Thanks in advance.</p>