Prevent calling parent when nested ui-sref


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 click inner to only alert inner. Currently if I click inner, it will alert both outer and inner state.


<!DOCTYPE html>
<html ng-app="plunker">

    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="" data-semver="1.2.13"></script>
    <script data-require="ui-router@0.2.8" data-semver="0.2.8" src=""></script>
    <script src="app.js"></script>

  <body ng-controller="MainCtrl">
    <a ui-sref="outer" style="width:300px;height:300px;background:yellow;">
            <span ui-sref="inner" style="width:100px;height:100px;background:red;">Inner</span>



var app = angular.module('plunker', ['ui.router']);

'use strict';

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

    .state("outer", {
      url: "/outer",
      resolve: {
        test: function() {
          alert("Triggered state outer");
          return true;
    .state("inner", {
      url: "/inner",
      resolve: {
        test: function() {
          alert("Triggered state inner");
          return true;


app.controller('MainCtrl', function($scope) {



  1. How to prevent inner to trigger outer state?

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

  3. Are there alternatives? Maybe using $state.go manually?


I cannot change HTML due to requirement. This is just a simplified version because in my code, the outer element is very large containing other elements.


This works

<a ui-sref="outer" style="width:300px;height:300px;background:yellow;">
        <span ui-sref="inner" style="width:100px;height:100px;background:red;" ng-click="$event.stopPropagation()">Inner</span>

I didn’t know you can add ng-click="$event.stopPropagation()" in the same element as ui-sref

Answered By – HP.

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.