How to separate menu into different view in AngularJS ui-router application? - angularjs

Question

I have this:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="main">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="main.tm">Task manager</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ui-sref-active="active"><a ui-sref="main.settings">Settings</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron" ui-view>
<div class="main-viewer" ></div>
</div>
</div> <!-- /container -->
Here is how states conf:
$stateProvider.state({
name: 'main',
url: '/',
template: mainTemplate
});
$stateProvider.state({
name: 'main.tm',
url: '/tm',
controller: 'tm.list',
template: view
});
$stateProvider.state({
name: 'main.settings',
url: '/settings',
controller: 'settings.ctrl',
template: view
});
$urlRouterProvider.otherwise('/tm');
Summary:
Now I have header (menu) and content block. Dependent on what button user press in menu settings or tm module appears in content block. Both settings and tm module is in separated directories (different modules).
The problem:
Menu html and container for settings and tm block (<div ui-view></div>) are in one HTML file. I want to separate menu into different module (like settings and tm are in separated modules).
What I want:
main module will be like (view pseudocode):
<container for menu>
<container for content>
Menu will be in directory menu and there will be files menu.html and menu.ctrl.js. It will be "injected" to container "container for menu". tm and settings already in correct directories and have their own views and controllers.
Whole code is here.
PS. One of the expected results was:
<menu-component></menu-component>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron" ui-view>
<div class="main-viewer">
Welcome page
</div>
</div>
</div> <!-- /container -->
Now menu logic is in the separated controller and view is in the separated html.