ng bind html ui sref,嵌套ui-sref时阻止调用parent

假设我有嵌套的DOM，每个ui-sref状态都有angular-ui-router。我想点击外部以仅警告外部，然后点击内部以仅提醒内部。目前，如果我点击内部，它将提醒外部和内部状态。

HTML：

AngularJS Plunker

document.write('');

Outer

Inner

使用Javascript：

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

'use strict';

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

$stateProvider

.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) {

});

问题：

如何防止内部触发外部状态？

我是否应该为内部DOM实现某种stopImmediatePropagation，以便它不会触发父DOM的ui-sref？

有其他选择吗？也许手动使用$state.go？

醇>

更新1：

由于要求，我无法更改HTML。这只是一个简化版本，因为在我的代码中，外部元素非常大，包含其他元素。