Pastebin | Laravel.io

//////My aim is to apply the same classes the bootstrap nav has, but on to my directive//////

///////////////////DIRECTIVE///////////////////
module.directive('member', function ($compile) {
	return {
		restrict: "E",
		replace: true,
		scope: {
			member: '='
		},
		template: '<li><a href="#">{{member.title}}</a></li>',
		link: function (scope, element, attrs) {
			console.log(scope.member.children);
			if (angular.isArray(scope.member.children)) {
				$compile('<ul><member ng-repeat="val in member.children" member="val"></member></ul>')(scope, function(cloned, scope){
				   element.append(cloned);
				});
			}
		},
	}
});

////////////////////////VIEW//////////////////
<ul><member ng-repeat='item in locations' member='item'></member></ul>

///////////////BOOTSTRAP/////////////////////
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>