Add dropdown menu inside sidebar with material design? - angularjs

Question

I would like when click on polls , open dropdown menu which include sub categories of pulls.
How i should change my code in order to add this functionality with material design.
In state provider:
$stateProvider
.state('admin', {
/*abstract: true,*/
url: '/admin',
templateUrl: 'app/admin/admin.html',
controller: 'AdminCtrl',
onEnter: function($rootScope) {
$rootScope.title = $rootScope.titleRoot + ' | Admin';
}
});
});
and in .html
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Admin</h1>
</md-toolbar>
<md-content class="" ng-controller="LeftCtrl">
<md-button ng-click="close()" class="md-primary" hide-gt-md>
Close Sidenav Left
</md-button>
<!--<p hide-md show-gt-md>-->
<!--</p>-->
<ul class="sidenav-menu">
<li class="" ng-repeat="section in sections">
<md-button ui-sref="{{section.link}}">
<i class="fa fa-fw {{section.icon}}"></i> {{section.title}}
</md-button>
</li>
</ul>
</md-content>
</md-sidenav>
Inside Controller:
.controller('AdminCtrl', function($scope, $mdSidenav, $timeout, $log) {
$scope.sections = [
{
title: 'User Management',
icon: 'fa-user',
link: 'usermanagement'
},{
title: 'Polls',
icon: 'fa-files-o',
link: 'polls'
}
];
$scope.toggleLeft = function () {
$mdSidenav('left').toggle()
.then(function () {
//$log.debug("toggle left is done");
});
};
})
.controller('LeftCtrl', function($scope, $timeout, $mdSidenav, $log) {
$scope.close = function() {
$mdSidenav('left').close()
.then(function(){
//$log.debug("close LEFT is done");
});
};
});

Answer 1

Since you are using Angular-Material, I suggest you use it's Menu directive: https://material.angularjs.org/latest/#/demo/material.components.menu