how to implement ng-show right way? - angularjs

Question

can someone check my code and tell me how to make it in right way?
it works but i don't think this is the right
if i would have 20 sub menus,i would need to create 20 functions,which is definitely wrong
thank you in advance
<ul class="menu-top">
<li ng-click="menu2show()">drinks</li>
<li ng-click="menu1show()">food</li>
<li ng-click="menu3show()">desserts</li>
</ul>
<div id="menu-content" ng-controller="MenuCtrl">
<div class="menu1" ng-show="show1" >
<div class="item" ng-repeat="item in menu.menu1">
</div>
</div>
<div class="menu2" ng-show="show2" >
<div class="item" ng-repeat="item in menu.menu2">
</div>
</div>
<div class="menu3" ng-show="show3" >
<div class="item" ng-repeat="item in menu.menu3">
</ul>
</div>
</div>
</div>
var app = angular.module('App', []);
app.controller('MenuCtrl', function($scope) {
$scope.menu = {
menu1:[
{"name":"item1", "price":"1", "desc":"aaa"},
{"name":"item2", "price":"2", "desc":"bbb"},
{"name":"item3", "price":"3", "desc":"ccc"},
],
menu2:[
{"name":"item8", "price":"6", "desc":"zzz"},
{"name":"item9", "price":"4", "desc":"xxx"},
{"name":"item10", "price":"2", "desc":"sss"},
],
menu3:[
{"name":"item15", "price":"3", "desc":"mmmm"},
{"name":"item16", "price":"1", "desc":"nnn"},
{"name":"item17", "price":"5", "desc":"bbb"},
]};
$scope.show1 = true;
$scope.menu1show = function(){
$scope.show1 = true;
$scope.show2 = false;
$scope.show3 = false;
}
$scope.menu2show = function(){
$scope.show1 = false;
$scope.show2 = true ;
$scope.show3 = false;
}
$scope.menu3show = function(){
$scope.show1 = false ;
$scope.show2 = false ;
$scope.show3 = true ;
}
});

Answer 1

You can make a scope variable to capture the menu that you wish to display.
$scope.showMenu = 1;
Then for each menu:
<div class="menu2" ng-show="showMenu === 2" >
...
<div class="menu1" ng-show="showMenu === 1" >
and so on.
And for the click:
<li ng-click="showMenu = 2">drinks</li>
and so on.