AngularJS Directives NavBar

Angular Bootstrap NavBarTop directive with ng-transclude

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<!--<div ng-controller="myCtrl">
    {{foo | json}}
</div>
-->
<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>

JavaScript

var App = angular.module("myApp", []);

/*
App.controller("myCtrl",["$scope",function($scope){
    $scope.foo = {bar:21};
}]);
*/

App.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
    };
});

App.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
    };
});