How to properly implement ng-show?

Question

Angular

Hello everyone
Please tell me how to properly implement the switching menu
to work, then it works, but the logic is not correct
, that is, if there is 100 menus, you will need to write 100 functions, which is not correct
thanks

<ul class="menu-top">
            <li ng-click="menu2show()">НАПИТКИ</li>
            <li ng-click="menu1show()">ЕДА</li>
            <li ng-click="menu3show()">ДЕССЕРТЫ</li>
</ul>
   <div id="menu-content">
                    <div class="menu1"  ng-show="show1" >
                        <div  class="item" ng-repeat="item in menu.menu1">
                            <ul>
                                <li><p class="name small-bold">{{item.name}}</p><p class="price">{{item.price | currency : "€"}}</p><p class="desc">{{item.desc}}</p><li>
                            </ul>
                        </div>
                    </div>
                    <div class="menu2" ng-controller="MenuCtrl" ng-show="show2" >
                        <div  class="item" ng-repeat="item in menu.menu2">
                            <ul>
                                <li><p class="name small-bold">{{item.name}}</p><p class="price">{{item.price | currency : "€"}}</p><p class="desc">{{item.desc}}</p><li>
                            </ul>
                        </div>
                    </div>
                    <div class="menu3" ng-controller="MenuCtrl" ng-show="show3" >
                        <div  class="item" ng-repeat="item in menu.menu3">
                            <ul>
                                <li><p class="name small-bold">{{item.name}}</p><p class="price">{{item.price | currency : "€"}}</p><p class="desc">{{item.desc}}</p><li>
                            </ul>
                        </div>
                    </div>
                </div>

var app = angular.module('App', []);
    app.controller('MenuCtrl', function($scope) {
  
        $scope.menu = {
            menu1:[
                    {"name":"item1", "price":"1", "desc":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"},
                    {"name":"item2", "price":"2", "desc":"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"},
                    {"name":"item3", "price":"3", "desc":"cccccccccccccccccccccccccccccccccc"},
                 ],
            menu2:[
                    {"name":"item8", "price":"6", "desc":"zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz"},
                    {"name":"item9", "price":"4", "desc":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"},
                    {"name":"item10", "price":"2", "desc":"sssssssssssssssssssssssssssssssssss"},
                ],
            menu3:[
                {"name":"item15", "price":"3", "desc":"mmmmmmmmmmmmmmmmmmmm"},
                {"name":"item16", "price":"1", "desc":"nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn"},
                {"name":"item17", "price":"5", "desc":"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbj"},
            ]
};
      $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

Make one global variable, "activeMenu" and on click assign a list - the content of the menu.
For this, one ng-reperat is enough for you