Hola comunidad estoy tratando de crear un menu desplegable en un sideBar para la parte administrativa. El problema que resulta es que cuando hago click en un sub-menu se despliegan todos los sub-menus y viceversa. Aquí esta mi código. Espero que puedan ayudarme.
<div class="side-bar hide-on-med-and-down">
<div class="row profile-side-bar">
<div class="col s4">
<img class="circle responsive-img" ng-src="assets/img/avatar.jpg">
</div>
<div class="col s8">
<p>User Name</p>
<small>Administrador</small>
</div>
</div>
<ul>
<li><a class="white-text" ng-click="openBar = !openBar"><i class="material-icons">menu</i> <span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">MENÚ</span></a></li>
<li><a href=""><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">Texto menu</span></a></li>
<li class="sub-nav">
<a ng-click="childrenOpen = !childrenOpen"><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">Texto menu</span><i class="nav-down material-icons">keyboard_arrow_down</i></a>
<ul class="children" ng-class="{'show-children':childrenOpen,'hide-children':!childrenOpen}">
<li><a href="#">Item #1</a></li>
<li><a href="#">Item #2</a></li>
<li><a href="#">Item #3</a></li>
<li><a href="#">Item #4</a></li>
</ul>
</li>
<li><a href=""><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">Texto menu</span></a></li>
<li class="sub-nav">
<a ng-click="childrenOpen = !childrenOpen"><i class="material-icons">dashboard</i><span ng-class="{'text-open-side-bar': !openBar, 'text-close-side-bar': openBar}">Texto menu</span><i class="nav-down material-icons">keyboard_arrow_down</i></a>
<ul class="children" ng-class="{'show-children':childrenOpen,'hide-children':!childrenOpen}">
<li><a href="#">Item #1</a></li>
<li><a href="#">Item #2</a></li>
<li><a href="#">Item #3</a></li>
<li><a href="#">Item #4</a></li>
</ul>
</li>
</ul>
</div>
Al hacer click se despliega los dos class="sub-nav"
, esto es lógico porque cambia el $scope, pero como podría hacer que solo se despliege el submenu donde hice click. Gracias por sus amables respuestas