advancedNavigation

Advanced nav service

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-include="'menu.html'"></div>
<div ui-view="main"></div>

<script type="text/ng-template" id="menu.html">
    <nav class="navbar navbar-default" ng-controller="menuCtrl as mn">
      <div class="container-fluid">
        <div class="navbar-header">
            <span class="navbar-brand">Our Menu</span>
        </div>
        <div>
          <ul class="nav navbar-nav">
              <li ng-repeat="m in mn.menuItems track by $index" ng-class="{'active': m && m.active}">
                  <a ng-href="{{ mn.getRouteSref(m)...

CSS

.modal-dialog {
    margin-top: 20px;
}

JavaScript

(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.controllers', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui']);

    var watchCountService = function () {
        // I return the count of watchers on the current page.
        function getWatchCount() {
            var total = 0;
            angular.element(".ng-scope").each(

            function countWatchers() {
                var scope = $(this).scope();
                total += scope.$$watchers ? scope.$$watchers.length : 0;
            });

            return (total);
        }

        return {
            getWatchCount: getWatchCount
        };
    };

    var menuService = function ($rootScope, $q, $state, $sce, dialogService) {
        var menuItems = [
            {
                name: 'state1', heading: "State1",
                route: "app.state1",
                active: false
            }, {
                name: 'state2',
                heading: "State2",
                route: "app.state2",
                active: false
            }, {
                name: 'state3',
                heading: "State3",
                route: "app.state3",
                active: false
            }, {
                name: 'state4',
                heading: "State4",
                route: "app.state4",
                active: false
            }];
        var
        currentMenuItem,
        onNavigateFn,
        validationFn,
        resetMenuItem = function (menuItem) {
            menuItem.active = false;
        },
        resetMenuItems = function () {
            for (var i = 0; i < menuItems.length; i++) {
                resetMenuItem(menuItems[i]);
            }
        },
        findMenuItem = function (routeName) {
            var criteriaFunction = function (c) {
                return c.route ===...