lossendae/index.html

## index.html
<!DOCTYPE html>
<html ng-app>
  <head>
    <title>Example</title>

  </head>
  <body>
    <nav class="main-nav" data-main-menu data-root="index"></nav>

    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="ui.router.js"></script>
  </body>
</html>

## mainMenu.js
'use strict';

define(['app'], function (app) {

    var mainMenu = function($state, $stateParams, commons) {
        return {
            restrict: 'A',
            templateUrl: commons.path('views') + 'common/menu.html',
            transclude: true,
            compile: function(tElement, tAttrs) {

                var root = tAttrs.root;

                return function($scope, $elem, $attr) {
                    $scope.show = function(state){
                        if(!angular.isDefined(state.menu)){
                            return false;
                        }
                        if(!angular.isDefined(state.menu.icon)){
                            state.menu.icon = 'fa-link';
                        }
                        if(!angular.isDefined(state.menu.target)){
                            state.menu.target = state.name;
                        }
                        if(angular.isDefined(root)){
                            state.current = state.name == root ? $state.is(root) : $state.includes(state.name);
                        } else {
                            state.current = $state.is(state.name);
                        }
                        return true;
                    };
                }
            }
        };
    };

    app.register.directive('mainMenu', ['$state', '$stateParams', 'commons', mainMenu]);
});

## menu.html
<ul>
    <li data-ng-repeat="state in $state.get() | filter:show" data-ui-sref-active="current">
        <a ui-sref="{{ state.menu.target }}"><i class="fa {{ state.menu.icon }}"></i>{{ state.menu.title }}</a>
    </li>
</ul>

## state.js
/* In my main config module */

// Shown in menu
$stateProvider
    .state('index', {
        url: "/",
        menu : {
            title : 'Dashboard',
            icon : 'fa-home'
        }
    });

/* In another config module */

$stateProvider
    // Not shown in menu
    .state('index.item', {
        url: "/item"
    })
    // Show in menu
    .state('index.item.child', {
        url: "/child1",
        abstract: true
        menu : {
            title : 'A menu item',
            state : 'index.item.child.grandchild' // Point to children
        }
    })
    // Not shown in menu but a menu item point to it
    .state('index.item.child.grandchild', {
        url: ""
    })
    // Not shown in menu
    .state('index.item.child.grandchild2', {
        url: "/child2"
    });
	<!DOCTYPE html>
	<html ng-app>
	<head>
	<title>Example</title>

	</head>
	<body>
	<nav class="main-nav" data-main-menu data-root="index"></nav>

	<script type="text/javascript" src="angular.js"></script>
	<script type="text/javascript" src="ui.router.js"></script>
	</body>
	</html>
	'use strict';

	define(['app'], function (app) {

	var mainMenu = function($state, $stateParams, commons) {
	return {
	restrict: 'A',
	templateUrl: commons.path('views') + 'common/menu.html',
	transclude: true,
	compile: function(tElement, tAttrs) {

	var root = tAttrs.root;

	return function($scope, $elem, $attr) {
	$scope.show = function(state){
	if(!angular.isDefined(state.menu)){
	return false;
	}
	if(!angular.isDefined(state.menu.icon)){
	state.menu.icon = 'fa-link';
	}
	if(!angular.isDefined(state.menu.target)){
	state.menu.target = state.name;
	}
	if(angular.isDefined(root)){
	state.current = state.name == root ? $state.is(root) : $state.includes(state.name);
	} else {
	state.current = $state.is(state.name);
	}
	return true;
	};
	}
	}
	};
	};

	app.register.directive('mainMenu', ['$state', '$stateParams', 'commons', mainMenu]);
	});
	/* In my main config module */

	// Shown in menu
	$stateProvider
	.state('index', {
	url: "/",
	menu : {
	title : 'Dashboard',
	icon : 'fa-home'
	}
	});

	/* In another config module */

	$stateProvider
	// Not shown in menu
	.state('index.item', {
	url: "/item"
	})
	// Show in menu
	.state('index.item.child', {
	url: "/child1",
	abstract: true
	menu : {
	title : 'A menu item',
	state : 'index.item.child.grandchild' // Point to children
	}
	})
	// Not shown in menu but a menu item point to it
	.state('index.item.child.grandchild', {
	url: ""
	})
	// Not shown in menu
	.state('index.item.child.grandchild2', {
	url: "/child2"
	});