在Angularjs中实现水平组菜单的问题

我是angularjs的新手，正在实现一个菜单框架，它可以是垂直的，也可以是水平的，这取决于一个按钮切换

<my-menu>
    <my-menu-item></my-menu-item>
    <my-menu-group label="Fruits">
        <my-menu-item label="Apple"></my-menu-item>
        <my-menu-item label="Orange"></my-menu-item>
    </my-menu-group>
    <my-menu-group label="Vegetables">
        <my-menu-item label="Tomato"></my-menu-item>
        <my-menu-item label="Beans"></my-menu-item>
    </my-menu-group>
<my-menu>

垂直菜单工作正常。但是，当菜单水平时，如果我单击“水果”，我会得到相应的列表值，然后当我单击蔬菜时，两个列表都会呈现。我期望的是切换功能。这里的底线是，我无法控制链接函数中先前单击的元素的范围。 我已经尽我所能在这里尽可能的描述。请帮忙

<li class="my-selectable-item" ng-click="clickedMenuGroupItem()" ng-class="{'my-item-horizontal': !isVertical()}">
<div class="acc-noselect">
    <i class="fa {{icon}} my-menu-icon"></i>
    {{label}}
    <i ng-if="isVertical()"
       class="fa fa-angle-right my-group-indicator-left" ng-class="{'fa-rotate-90':isOpen}"></i>

    <i ng-if="!isVertical()" style="margin-left:5px;"
       class="fa fa-angle-down" ng-class="{'fa-rotate-180':isOpen}"></i>

</div>

link: function(scope,el,attr,ctrl) {
            scope.isOpen = false;
            scope.closeMenu = function () {
                scope.isOpen = false;
            };
            scope.clickedMenuGroupItem = function () {
                scope.isOpen = !scope.isOpen;
                if (el.parents('.my-subitem-section').length === 0) 
                    scope.setSubmenuPosition();
                ctrl.setOpenMenuScope(scope);
            };

            scope.isVertical = function() {
                return ctrl.isVertical() || el.parents('.my-subitem-section').length > 0;
            };

            scope.setSubmenuPosition = function(){
                var pos = el.offset();
                $('.my-subitem-section').css({'left':pos.left + 20, 'top' : 40});
            };
        }