<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Navbar Demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.5.0/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-app="headerMenuApp">
        <div ng-controller="headerMenuListController">
            <nav id="headerNavigationMenuContainer" class="navbar navbar-default">
                <div class="container-fluid">

                    <!-- Non-collapsing right-side menu items -->
                    <div class="navbar-header pull-right">
                        <ul class="nav pull-left navbar-nav text-nowrap">
                            <li class="dropdown pull-right">
                                <a href="#" class="dropdown-toggle navbar-icon" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-question-circle"></i> &nbsp; Help <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Live Chat</a></li>
                                    <li><a href="#">Help Topics</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                    <!-- Collapsing left-side menu items -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
                            <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="#">Logo</a>
                    </div>

                    <div id="navbar" class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
                        <ul class="nav navbar-nav text-nowrap">
                            <leaf ng-repeat='leaf in tree' leaf='leaf'></leaf>
                        </ul>
                    </div>

                </div>
            </nav>
        </div>
        <div>Some TExt</div>
    </div>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>
(function ($) {
    $(function () {
        // This first selector (#headerNavigationMenuContainer) must be a static element.  Otherwise, new elements won't get event handled by this code.
        $("#headerNavigationMenuContainer").on("click", "ul.dropdown-menu [data-toggle=dropdown]", function () {
            event.preventDefault();
            event.stopPropagation();
            $(this).parent().siblings().removeClass("open");
            $(this).parent().toggleClass("open");
        });
    });
})(jQuery);

'use strict';

var app = angular.module("headerMenuApp", []);
app.controller("headerMenuListController", function ($scope, $http) {
  $scope.tree = [{"title": "Home","url": "#","parentSequenceNo": 1,"target": null,"subMenuItems": []}, {"title": "Contact","url": "#","parentSequenceNo": 1,"target": null,"subMenuItems": []}, {"title": "Products","url": null,"parentSequenceNo": 1,"target": null,"subMenuItems": [{"title": "Toys","url": null,"parentSequenceNo": 10000,"target": null,"subMenuItems": [{"title": "GI Joe","url": "#","parentSequenceNo": 10100,"target": null,"subMenuItems": []}, {"title": "Hot Wheels","url": "#","parentSequenceNo": 10100,"target": null,"subMenuItems": []}, {"title": "Lite Brite","url": "#","parentSequenceNo": 10100,"target": null,"subMenuItems": []}, {"title": "Play Doh","url": "#","parentSequenceNo": 10100,"target": null,"subMenuItems": []}]}, {"title": "Ajax Cleaner","url": "#","parentSequenceNo": 10000,"target": "_blank","subMenuItems": []}, {"title": "Wash Rags","url": "#","parentSequenceNo": 10000,"target": null,"subMenuItems": []}]}, {"title": "Cart","url": "#","parentSequenceNo": 1,"target": null,"subMenuItems": []}];
});


app.directive("tree", function () {
    return {
        restrict: "E",
        replace: true,
        scope: { tree: "=" },
        templateUrl: "navigationMenuList.html"
    };
});

app.directive("leaf", function ($compile) {
    return {
        restrict: "E",
        replace: true,
        scope: { leaf: "=" },
        templateUrl: "navigationMenuListItem.html",
        link: function (scope, element, attrs) {
            if (scope.leaf.subMenuItems && scope.leaf.subMenuItems.length > 0) {
                element.append("<tree tree='leaf.subMenuItems'></tree>");
                element.addClass("dropdown");
                if (scope.leaf.parentSequenceNo !== 1) { element.addClass("dropdown-submenu"); }
                scope.menuItemUrl = "#";
                scope.menuItemDataToggle = "dropdown";
                scope.menuItemRole = "button";
                scope.menuItemClass = "dropdown-toggle";
                $compile(element.contents())(scope);
            } else {
                scope.menuItemUrl = scope.leaf.url;
            }
        }
    };
});
.marginBottom-0 {
    margin-bottom: 0;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after:hover {  /*The "hover" must come after "after" for the mouse-over sub-menu icons to work.*/
        border-left-color: #555;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            border-radius: 6px 0 6px 6px;
        }
<ul class='dropdown-menu navigationmenu-list' role='menu'>
  <leaf ng-repeat='leaf in tree' leaf='leaf'></leaf>
</ul>
<li class="navigationmenu-listitem">
    <a href="{{menuItemUrl}}" data-toggle="{{menuItemDataToggle}}" role="{{menuItemRole}}" class="{{menuItemClass}}" ng-if="leaf.title !== 'divider'">
        {{leaf.title}}
        <span ng-if="leaf.subMenuItems.length > 0 && leaf.parentSequenceNo == 1" class="caret"></span>
    </a>
</li>