controller.js

(function () {
    'use strict';

    angular
        .module('sidenav2',['ngMaterial', 'ngAnimate'])
        .controller('sidenav2Ctrl', ['$scope', '$menuService',sidenav2Ctrl])
        .directive('sideMenu', sidenavDirective)
        .directive('menuLink', sidenavMenuLinkDirective)
        .directive('menuToggle', sidenavMenuToggleDirective)
        .directive('menuHeading', sidenavMenuHeadingDirective)
        .factory('$menuService', MenuService)
        .factory('$sideMenuService', sidenavToggleMenuService)
    ;

    function sidenav2Ctrl($scope, $menuService) {
        $scope.sections = $menuService.getSections();
    }

    function sidenavDirective($menuService) {
        return {
            templateUrl: 'sidenav2/client/views/sidenav2.client.view.sideNav.html',
            link: function ($scope) {
                $scope.sections = $menuService.getSections();
            }
        }
    }

    function sidenavMenuHeadingDirective(){
        return {
            scope: {
                section:'='
            },
            template: `
            <hr class="divider">
                <div>
                    <md-list>
                        <md-list-item class="menu-heading"
                                      id="{{ section.name }}">
                            {{section.name}}
                
                        </md-list-item>
                    </md-list>
                
                    <md-list flex id="{{section.name}}" class="no-padding" >
                        <md-list-item flex ng-repeat="page in section.pages" class="no-padding">
                            <menu-link section="page" flex ></menu-link>
                        </md-list-item>
                        <md-divider ng-if="$last"></md-divider>
                    </md-list>
                
                </div>
                
                `

        }
    }

    function sidenavMenuToggleDirective($sideMenuService){
        return {
            scope: {
                section: '='
            },
            template:`<div flex>
                    <md-list-item class="md-toggle-head "
                                  ng-click="toggle()"
                                  ng-class="active()"
                                  aria-controls="{{section.name}}"
                                  flex layout="row"
                                  aria-expanded="{{isOpen()}}">
                
                        {{section.name}}
                        <span aria-hidden="true" flex ng-class="{'toggled' : isOpen()}"></span>
                        <md-button class="md-icon-button" aria-label="Settings">
                            <md-icon md-svg-icon="img/icons/key_up.svg" class="arrow opened-menu-icon" ng-class="{'toggled' : isOpen()}" ></md-icon>
                        </md-button>
                    </md-list-item>
                    <div ng-show="isOpen()" class="animated">
                        <md-list flex id="{{section.name}}" class="no-padding" >
                            <md-list-item flex ng-repeat="page in section.pages" class="no-padding">
                                <menu-link section="page" flex></menu-link>
                            </md-list-item>
                
                        </md-list>
                    </div>
                </div>
                `,
            link: function($scope, $element) {

                $scope.isOpen = function() {
                    return $sideMenuService.isOpen($scope.section);
                };

                $scope.toggle = function() {
                    $sideMenuService.toggleOpen($scope.section);
                };

                $scope.active = function () {
                    return $sideMenuService.isOpen($scope.section)? 'active': '';
                }
            }
        };
    }

    function sidenavMenuLinkDirective( $sideMenuService) {
        return {
            scope: {
                section: '='
            },
            template: `<md-list-item
                            flex
                            ng-class="active()"
                            ng-click="open()"
                >
                    <div style="width: 15px" ng-if="is">
                
                    </div>
                    <div  ng-class="getClass()">
                        {{section.name}}
                    </div>
                    <md-divider ng-if="$last"></md-divider>
                </md-list-item>`,
            link: function ($scope) {
                $scope.open = function () {
                    $sideMenuService.toggle();
                    $sideMenuService.autoFocusContent = true;
                    // $location.path($scope.section.url);
                };

                $scope.active = function () {
                    return false;
                    // return $location.$$path.replace('/','') === $scope.section.url.replace('/','')? 'active': '';
                };

                $scope.getClass = function () {
                    return 'menu-'+ $scope.section.type;
                };
            }
        };
    }

    function sidenavToggleMenuService ($mdSidenav, $menuService) {
        var sections = $menuService.getSections();
        var openedSection = sections[1];

        return {
            toggle : function () {
                $mdSidenav('menu').toggle();
            },

            isOpen : function (section) {
                return openedSection !== null && section.name === openedSection.name;
            },

            toggleOpen : function (section) {
                openedSection = this.isOpen(section)? null: section;
            }

        }

    }

    function MenuService() {

        return  {
            getSections: function () {
                return [].concat(
                    {
                        name: 'DashBoard',
                        type: 'link',
                        url:'/dashboard'
                    },
                    {

                        name: 'Cluster Type',
                        type: 'toggle',
                        pages: [
                            {
                                name: 'Kubernetes',
                                type: 'sublink',
                                url: 'kubernete'
                            }, {
                                name: 'ECS',
                                url: 'ecs',
                                type: 'sublink'
                            },
                            {
                                name: 'AutoScaled EC2',
                                type: 'sublink',
                                url: 'ec2'
                            },
                            {
                                name: 'Stateful EC2',
                                type: 'sublink',
                                url: 'stateful'
                            }
                        ]
                    },

                    {

                        name: 'Another',
                        type: 'toggle',
                        pages: [
                            {
                                name: 'Kubernetes',
                                type: 'sublink',
                                url: 'kubernete'
                            }, {
                                name: 'ECS',
                                type: 'sublink',
                                url: 'ecs2',
                            },
                            {
                                name: 'AutoScaled EC2',
                                type: 'sublink',
                                url: 'ec22'
                            },
                            {
                                name: 'Stateful EC2',
                                type: 'sublink',
                                url: 'stateful2'
                            }
                        ]
                    },
                    {
                        name: 'Settings',
                        type: 'heading',
                        pages:[
                            {
                                name: 'Profile',
                                type: 'link',
                                url: 'x'
                            }
                        ]
                    }
                );
            }
        };
    }

}());

sidenav2.client.view.html

<div class="sidenav-left-cont" ng-controller = "sidenav2Ctrl">
    <md-sidenav class="md-sidenav-left md-whiteframe-z2 sidenav-blue"
                md-component-id="menu"

                md-is-locked-open="$mdMedia('gt-md')"
                md-whiteframe="0"
    >
        <md-list class="no-padding">
            <md-list-item class="no-padding" ng-repeat= "section in sections" flex>
                <menu-heading   section="section" flex ng-if="section.type === 'heading'"></menu-heading>
                <menu-link      section="section" flex ng-if="section.type === 'link' || section.type === 'page'"></menu-link>
                <menu-toggle    section="section" flex ng-if="section.type === 'toggle'"></menu-toggle>

            </md-list-item>

        </md-list>
    </md-sidenav>
</div>