AngularJS: Menu Directive

HTML

<div ng-app="HHF" ng-controller="MenuCtrl">
  <menu menus='menus' location='pull-left'></menu>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<style>

JavaScript

angular.module('HHF', [])
    .directive('menu', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                loc: '@location',
                menus: '='
            },
            link: function($scope, $element) {
               
            },
            template: '<ul class="nav {{loc}}">' + 
                         '<li ng-repeat="m in menus.left">' + 
                             '<a href="{{m.link}}">{{m.text}}</a>' + 
                         '</li>' + 
                      '</ul>'
        };
    })
    
    .controller('MenuCtrl', function ($scope) {
        $scope.menus = {
            "current": "index",
            "left": [{
                "active": true,
                "link": "\/",
                "text": "Home"},
            {
                "active": false,
                "link": "\/awards",
                "text": "Awards"},
            {
                "active": false,
                "link": "\/players",
                "text": "Players"},
            {
                "active": false,
                "link": "\/episodes",
                "text": "Episodes"},
            {
                "active": false,
                "link": "\/about",
                "text": "About"},
            {
                "active": false,
                "link": "\/contact",
                "text": "Contact Us"}],
            "rightLink": "\/session\/index",
            "rightText": "Log In"
        };
    });