Route in the modal does nt work angularjs - angularjs

Question

I have a problem with my route in modal, I can retrieve my first route ("/",menu.html) but when I press the buttons, the other routes do not appear.
This is my route:
angular.module('ui.bootstrap.demo').config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state("foo", {
url: "/foo",
template: '<h1>foo</h1>'
})
.state("menu", {
url: "/",
templateUrl: 'menu.html'
})
.state("bar", {
url: "/bar",
template: '<h1>bar</h1>'
})
$urlRouterProvider.otherwise("/");
});
This is my modal with the div view:
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<div class="row">
<div class="span12 ui-view-container">
<div class="well" ui-view></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
And this is my menu.html:
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li>Route 1</li>
<li>Route 2</li>
</ul>
</div>
</div>
I made a simple plunker with a modal.

Answer 1

State provider has ui-sref to handle route which takes the state name to navigate.
<ul class="nav">
<li><a ui-sref="foo">Route 1</a></li>
<li><a ui-sref="bar">Route 2</a></li>
</ul>
Update
When you open the modal, run it to a default state 'menu' through $state.go('menu').
In order for this to work, inject $state in the controller as bellow:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl',
function ($uibModal, $log, $document, $state) {
......
$ctrl.open = function (size, parentSelector) {
$state.go('menu');
......
}
});
Plunker updated with comment query.