Q:

ng-click event gets bind to child li in angular js

Hey I am binding menuIconClick($event) function on li using ng-click directive.But gets bind to child li also.
Code like as follow
%div.sideNavBar
  %ul.navBar
    %li.icons-briefcase-static{'ng-click'=>"menuIconClick($event)"} // binding here only
      %ul.subMenu
        %li All sites // but gets call here also
        %li{'ng-repeat'=>"site in sites"}
          {{site.name}}
    %li.icons-users-disabled
  %div.lock.icons-lock-disabled

The template is in HAML.
I didn't got why?
Any help appreciated

A:

Try putting the icon & icon click event as a separate element, not on the parent element.  DOM events bubble up the hierarchy, so if the parent element has an ng-click handler, then clicking any child element will also trigger that parent click handler unless you stop the event propagation.
You could either stop the event propagation, similar to:
AngularJS ng-click stopPropagation
or change your DOM structure so that the briefcase icon is not a parent of the submenu:
%div.sideNavBar
  %ul.navBar
    %li
      %a.icons-briefcase-static{'ng-click'=>"menuIconClick($event)"} // no longer a parent
      %ul.subMenu
        %li All sites // click here won't bubble up to ng-click
        %li{'ng-repeat'=>"site in sites"}
          {{site.name}}
    %li.icons-users-disabled
  %div.lock.icons-lock-disabled

