ng-bootstrap-submenu

Demo: plnkr

* ng-bootstrap-submenu.min.css
* ng-bootstrap-submenu.min.js

Add the bootstrapSubmenu module dependency.

angular.module('myApp', ['bootstrapSubmenu']);

Use the directive (with ng-repeat if you have multiple dropdowns). Set the menu-item attribute to an object with the following properties:

* href = the link for the item (only necessary for items with no children).
* display = the text displayed for the item.
* children = an array of sub-items (may be empty).

Html:

Javascript:

angular.module('myApp', ['bootstrapSubmenu']);

angular
.module('myApp')
.controller('menuController', menuController);

function menuController() {
var vm = this;
vm.menuItems = [
{ display: 'Dropdown Item 1', href: '#', children: [
{ display: 'Child 1', href: '#', children: [
{ display: 'Sub 1', href: '#sub1', children: []},
{ display: 'Sub 2', href: '#sub2', children: []}]},
{ display: 'Child 2', href: '#child2', children: []}]},
{ display: 'Dropdown Item 2', href: '#dropdown2', children: []},
{ display: 'Dropdown Item 3', href: '#', children: [
{ display: 'Child 3', href: '#child3', children: []}]}
];
});