Add clickable element within a clickable table row

Question

Let's say I have a table row with a clickable element in it:

  <tr ng-repeat="product in products" onclick="showProductDetail()">
      <td>{{product.id}}</td>
      <td>{{product.title}}</td>
      <td>{{product.price}}</td>
      <td>
        <switch id="enabled" name="enabled" ng-model="product.enabled" ng-change="enableProduct()"></switch>
      </td>
  </tr>

I'm using Angular UI Switch but the issue would be the same for any clickable element.

How do I make the row clickable but isolate the behavior of the switch? Currently it tries to do both, resulting in wonky behavior. I know I could just make each cell except that last one clickable, but is there a cleaner way?

Answer 1

If Dmitry's answer does not work.

Try calling the ng-change with enableProduct($event)

And within that function, call

function enableProduct($event) {
   $event.stopPropagation();
   ...
}

Answer 2

I believe the <switch> handler should stop the event propagation. Try to return false from you ng-change handler. Eg

ng-change="enableProduct(); return false"