Angular Material sidenav issues - angularjs

Question

I am developing with angular an admin, and resources I'm using Angular Material sidenav.
I could make the menu work 50%, can not do the toggle function normally.
Test case, click several times on the toggle menu it opens :D
<header class="nav-header">
<a ng-href="#/" class="docs-logo">
<h1 class="docs-logotype md-heading">Angular Material</h1>
</a>
</header>
<ul class="skip-links">
<li class="md-whiteframe-z2">
<md-button ng-click="focusMainContent($event)" href="#">Skip to content</md-button>
</li>
</ul>
<md-content flex role="navigation">
<ul class="docs-menu">
<li ng-repeat="sectionmenu in menu.sections" class="parent-list-item {{sectionmenu.className || ''}}" ng-class="{'parentActive' : isSectionSelected(sectionmenu)}">
<h2 class="menu-heading md-subhead" ng-if="sectionmenu.type === 'heading'" id="heading_{{ sectionmenu.title | nospace }}">
{{sectionmenu.title}}
</h2>
<menu-link sectionmenu="sectionmenu" ng-if="sectionmenu.type === 'link'"></menu-link>
<menu-toggle sectionmenu="sectionmenu" ng-if="sectionmenu.type === 'toggle'"></menu-toggle>
</li>
</ul>
</md-content>
</md-sidenav>
Follows a problem Plunker:
http://embed.plnkr.co/fq3tonZoddSSZkyAaWD8/preview
Editable Plunker:
http://plnkr.co/edit/FQcZrwYlh4LPKuje9mLI?p=preview
UPDATED and RESOLVED:
In template menu-toggle.tpl.html, change this:
<ul ng-show="isOpen()" id="menu-{{sectionmenu.title | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in sectionmenu.pages">
<menu-link sectionmenu="page"></menu-link>
</li>
</ul>
for this:
<ul id="menu-{{sectionmenu.title | nospace}}" class="menu-toggle-list">
<li ng-repeat="page in sectionmenu.pages">
<menu-link sectionmenu="page"></menu-link>
</li>
</ul>