Responsive navbar with submenu - angularjs

Question

I need to make a responsive navbar menu containing items and subitems. I've tried with bootstrap but it turns inconvenient adding submenus.
There is any tool, framework, code or plugin that can help me with this?
My website it's made with AngularJS.

Answer 1

Bootstrap Navbar with submenu
$(document).ready(function() {
$('.navbar a.dropdown-toggle').on('click', function(e) {
var $el = $(this);
var $parent = $(this).offsetParent(".dropdown-menu");
$(this).parent("li").toggleClass('open');
if (!$parent.parent().hasClass('nav')) {
$el.next().css({
"top": $el[0].offsetTop,
"left": $parent.outerWidth() - 4
});
}
$('.nav li.open').not($(this).parents("li")).removeClass("open");
return false;
});
});
#media (min-width: 767px) {
.navbar-nav .dropdown-menu .caret {
transform: rotate(-90deg);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" href="#">NavBar</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>GitHub</li>
<li>
Menu 1 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 1.1]</li>
<li>Another action [Menu 1.1]</li>
<li>Something else here [Menu 1.1]</li>
<li class="divider"></li>
<li>Separated link [Menu 1.1]</li>
<li class="divider"></li>
<li>One more separated link [Menu 1.1]</li>
<li>
Dropdown [Menu 1.1] <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 1.2]</li>
<li>
Dropdown [Menu 1.2] <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Dropdown [Menu 1.3] <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 1.4]</li>
<li>Another action [Menu 1.4]</li>
<li>Something else here [Menu 1.4]</li>
<li class="divider"></li>
<li>Separated link [Menu 1.4]</li>
<li class="divider"></li>
<li>One more separated link [Menu 1.4]</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
Menu 2 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 2.1]</li>
<li>Another action [Menu 2.1]</li>
<li>Something else here [Menu 2.1]</li>
<li class="divider"></li>
<li>Separated link [Menu 2.1]</li>
<li class="divider"></li>
<li>One more separated link [Menu 2.1]</li>
<li>
Dropdown [Menu 2.1] <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 2.2]</li>
<li>Another action [Menu 2.2]</li>
<li>Something else here [Menu 2.2]</li>
<li class="divider"></li>
<li>Separated link [Menu 2.2]</li>
<li class="divider"></li>
<li>
Dropdown [Menu 2.2] <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Dropdown [Menu 2.3] <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action [Menu 2.4]</li>
<li>Another action [Menu 2.4]</li>
<li>Something else here [Menu 2.4]</li>
<li class="divider"></li>
<li>Separated link [Menu 2.4]</li>
<li class="divider"></li>
<li>One more separated link [Menu 2.4]</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>

Answer 2

You may try for this:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="col-md-12 clearfix">
<div class="row">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</div>
<div class="col-md-12 clearfix">
<div class="row">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</div>
</div>
it will looks as follows: