open one dropdown at a time while using ngHide/ngShow angular directives - angularjs

Question

I have a simple dropdown menu that I want to tweak a little. I need help with animating the dropdown so it's scaling down when it opens. But that is not my biggest concern. What I really need help with is opening only one dropdown at a time. So if I open one and another one had already been previously opened, it should close.
I'm using Angular-Material, so I am looking for an Angular Controller or directive solution please, one that uses ngHide/ngShow directives perhaps? Not sure about that part.
This is my HTML
<md-list ng-click="menuIsOpen = !menuIsOpen" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> Menu Item</span>
<i class="fa fa-chevron-down"></i>
</md-list>
<div class="sub-menu">
<ul ng-init="menuIsOpen= false" ng-show="menuIsOpen">
<md-menu-item ng-repeat="item in data">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</ul>
</div>
<md-list ng-click="menu2IsOpen = !menu2IsOpen" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> Menu Item 2</span>
<i class="fa fa-chevron-down"></i>
</md-list>
<div class="sub-menu">
<ul ng-init="menu2IsOpen= false" ng-show="menu2IsOpen">
<md-menu-item ng-repeat="item in data">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</ul>
</div>
I have a CODEPEN you can checkout. Thanks a lot!

Answer 1

In ng-click, set variable menuIsOpen to ng-click="menuIsOpen = 1" and as ng-show="menuIsOpen === 1 " Do the same thing with other menus.
Example
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-click="menuIsOpen = 1">About Page</button>
<button ng-click="menuIsOpen = 2">Help page</button>
<button ng-click="menuIsOpen = 3">Info Page</button>
<button ng-click="menuIsOpen = 4">Refrence page</button>
<div class="form-group" ng-show="menuIsOpen===1">
<p>About page</p>
</div>
<div class="form-group" ng-show="menuIsOpen===2">
<p>Help page</p>
</div>
<div class="form-group" ng-show="menuIsOpen===3">
<p>Info</p>
</div>
<div class="form-group" ng-show="menuIsOpen===4">
<p>Refrence</p>
</div>
</div>
<div ng-controller="ListBottomSheetCtrl" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
<div class="cnt">
<md-list ng-click="menuIsOpen = 1" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> Menu Item</span>
<i class="fa fa-chevron-down"></i>
</md-list>
<div class="sub-menu">
<ul ng-init="menuIsOpen= false" ng-show="menuIsOpen === 1 ">
<md-menu-item ng-repeat="item in data">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</ul>
</div>
<md-list ng-click="menuIsOpen = 2" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> Menu Item 2</span>
<i class="fa fa-chevron-down"></i>
</md-list>
<div class="sub-menu">
<ul ng-init="menu2IsOpen= false" ng-show="menuIsOpen === 2 ">
<md-menu-item ng-repeat="item in data">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</ul>
</div>
</div>
</div>

Answer 2

I solved try following:
<div ng-controller="ListBottomSheetCtrl" class="md-padding bottomSheetdemoBasicUsage" ng-cloak="" ng-app="MyApp">
<div class="cnt" ng-init="menuIsOpen= false; menu2IsOpen= false">
<md-list ng-click="menuIsOpen = !menuIsOpen; menu2IsOpen = false" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> Menu Item</span>
<i class="fa fa-chevron-down"></i>
</md-list>
<div class="sub-menu">
<ul ng-show="menuIsOpen">
<md-menu-item ng-repeat="item in data">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</ul>
</div>
<md-list ng-click="menu2IsOpen = !menu2IsOpen; menuIsOpen = false" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex>
<span class="title flex" flex=""> Menu Item 2</span>
<i class="fa fa-chevron-down"></i>
</md-list>
<div class="sub-menu">
<ul ng-show="menu2IsOpen">
<md-menu-item ng-repeat="item in data">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</ul>
</div>
</div>
Here is CODEPEN