AngularJS menu using JSON

First of all to create menu in AngularJS make your html page like this:

Html code

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

Then In the javascript file add the below code in the directives:

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"
        };
    });

And the last step is the css use the below style in the css file:

</style>
   <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>