Nested ng-click & $event.stopPropagation()

Question

I'm trying to cancel propagation inside a nested ng-click event.

$scope.cancel = function($event){
   $event.stopPropagation();
}

Relevant View Code:

<tbody>
  <tr ng-click="goTo(1)">
    <td class="col-md-1">{{ client.code }}</td>
    <td class="col-md-5">{{ client.name }}</td>
    <td class="col-md-2">{{ client.telephone }}</td>
    <td class="col-md-2">{{ client.fax }}</td>
    <td class="col-md-2"><a href="mailto:{{client.email}}" ng-click="cancel($event)">{{client.email}}</a></td>
  </tr>
</tbody>

Here's a plunker: http://plnkr.co/edit/dxgfK41Dp1Gs2DCmeFcw?p=info

Why doesn't it work?

Answer 1

It's not working because $event is undefined if you don't pass $event from the view:

Add this to your view:

<td class="col-md-2"><a href="mailto:{{client.email}}" ng-click="cancel($event)">{{client.email}}</a></td>

Here's your updated plunkr with propagation stopped: http://plnkr.co/edit/ywvPcO01C0fgzvpxRnf9?p=info