Untitled

angular.module('myApp', [])
.directive('navBarTop', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      'title': '@'
    },
    template:
      '<div class="navbar navbar-fixed-top">' +
        '<div class="navbar-inner">' +
          '<div class="container">' +
            '<a class="brand" href="#/">{{title}}</a>' +
            '<ul class="nav" ng-transclude></ul>' +
          '</div>' +
        '</div>' +
      '</div>',
    replace: true
  };
}).directive('navLocation', function($location) {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      'href': '@'
    },
    link: function (scope) {
      scope.location = function (href) {
        return href.substr(1) === $location.url();
      };
    },
    template: '<li ng-class="{active: location(href)}">' +
        '<a href="{{href}}" ng-transclude></a>' +
      '</li>',
    replace: true
  };
});

<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body ng-app="myApp">
    <nav-bar-top title="My Awesome App">
      <nav-location href="#/">Home</nav-location>
      <nav-location href="#/friends">Friends</nav-location>
      <nav-location href="#/robots">Robots</nav-location>
    </nav-bar-top>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script src="app.js"></script>
  </body>
</html>