Prevent calling parent when nested ui-sref

Question

Let say I have nested DOMs and each has ui-sref for different angular-ui-router state. I want to click outer to only alert outer and c

Answer 1

The problem is not with your javascript code but your html

  
      Outer
            Inner
    

when you click anywhere inside the tag, outer state will be invoked.

your

Inner

lies inside tag so this html element is bound to both ui-sref="inner" and ui-sref="outer"

the below code should solve your problem

      Outer

    

Inner