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

Should I implement some kind of stopImmediatePropagation for the inner DOM so it won't trigger the parent DOM's ui-sref?

Yes, exactly.

Alternately, you might be able to rearrange your HTML so that the don't have a parent/child relationship.