How to properly organize ng-show and ng-hide in Angular?

Question

Angular

There is a template

<ul class="menu">
                    <li class="menuItem" ng-repeat="menuItem in menu">
                        <a href="{{ menuItem.route }}" ng-click="showSubmenu = !showSubmenu">{{ menuItem.text }}</a>
                        <ul class="subMenu" ng-show="showSubmenu">
                            <li class="subMenuItem" ng-repeat="subMenuItem in menuItem.subMenu">
                                <a href="{{ menuItem.route }}{{ subMenuItem.route }}">{{ subMenuItem.text }}</a>
                            </li>
                        </ul>
                    </li>
                </ul>

Menu with submenus - ul>li>ul>li
Problem: when clicking on any 1 element of the main menu, its submenu is collapsed/expanded, the remaining submenus of other elements of the main menu retain their current expanded/collapsed state.
It is necessary that when you click on any element of the main menu, all other expanded submenu elements are collapsed, and the current one is expanded accordingly. How to do it right ?
I tried to select all submenus through angular.element(document.querySelector('.subMenu')) - returns only the submenu of the current menu element, as I understand it because of the separate scope?

Answer 1

make showSubmenu an array and change the value of each element.
Then on onclick you can run through the array and close the extra li
Something like showSubmenu[menuItem.id]