ng-click triggered twice with in a nested ng-click

Question

I have an issue when trying to use the ng-click inside a list which is a sub list of another list which has a ng-click event. Following is my code

<ul>
  <li
    ng-repeat="facet in node.Facets"
    ng-click="updateNav(facet.Action)"
    ng-cloak
   >
    {{facet.DisplayValue}}
    <ul>
      <li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
        ng-click="updateSubNav(sub.Action)"
      >
        {{sub.DisplayValue}}
      </li>
     </ul>
  </li>
</ul>

The problem I have is, when I click updateSubNav it automatically triggers updateNav. How can I prevent triggering updateNav When I click updateSubNav (because I want those 2 methods to work independently?

Answer 1

Prevent the event propagation.

View:

<li ng-repeat="sub in facet.Refinements.Nodes[0].Facets"
    ng-click="updateSubNav($event, sub.Action)">
                           ^^^^^^        === Pass event object

Controller:

$scope.updateSubNav = function($event, action) {
    // Code here

    // Stop propagation
    $event.stopPropagation();
}