A simple responsive navbar with submenu based on angularjs, twitter boostrap and a recursive tree structure. Menu items comes from a json object.

<!DOCTYPE html>
<html ng-app="my-app">

<head>
  <link href="style.css" rel="stylesheet" />
  <script data-require="angular.js@1.3.13" data-semver="1.3.13" src="https://code.angularjs.org/1.3.13/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
  <script src="script.js"></script>
  <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>

<body>
  <h1>Hello Navbar</h1>
  <div ng-app="my-app">
    <div ng-controller="treeController">
      <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" 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="#">Brand</a>
        </div>
        
        <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
        
        <ul class="nav navbar-nav">
          <li dropdown>
            <a href="#" dropdown-toggle>
              Dropdown
              <b class='caret'></b>
            </a>
            <tree tree='tree'></tree>
          </li>
          <li dropdown>
            <a href="#" dropdown-toggle>
              Just a clone
              <span class='caret'></span>
            </a>
            <tree tree='tree'></tree>
          </li>
        </ul>
        </div><!-- /.navbar-collapse -->
      </nav>
    </div>
  </div>
</body>

</html>

var app = angular.module('my-app', ['ui.bootstrap']);

app.controller('treeController', function($scope) {
  $scope.callMe = function() {
    alert("test");
  };
  
  $scope.tree = [{
    name: "Bob",
    link: "#",
    subtree: [{
      name: "Ann",
      link: "#"
    }]
  }, {
    name: "Jon",
    link: "#",
    subtree: [{
      name: "Mary",
      link: "#"
    }]
  }, {
    name: "divider",
    link: "#"
  }, {
    name: "Another person",
    link: "#"
  }, {
    name: "divider",
    link: "#"
  },{
    name: "Again another person",
    link: "#"
  }];
  
});

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

app.directive('leaf', function($compile) {
  return {
    restrict: "E",
    replace: true,
    scope: {
      leaf: "="
    },
    templateUrl: 'template-li.html',
    link: function(scope, element, attrs) {
      if (angular.isArray(scope.leaf.subtree)) {
        element.append("<tree tree='leaf.subtree'></tree>");
        element.addClass('dropdown-submenu');
        $compile(element.contents())(scope);
      } else {
        element.bind('click', function() {
          alert("You have clicked on " + scope.leaf.name);
        });

      }
    }
  };
});

.dropdown-submenu {
    position: relative;
}

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

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

.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: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #fff;
}

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

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

Creation of a navigation menu

<ul class='dropdown-menu'>
  <leaf ng-repeat='leaf in tree' leaf='leaf'></leaf>
</ul>

<li ng-class="{divider: leaf.name == 'divider'}"><a ng-if="leaf.name != 'divider'">{{leaf.name}}</a></li>