Angular Directive показать и скрыть div в шаблоне

Question

Я создал директиву, которую я использую для атрибута, в частности кнопки или якоря.

При нажатии на кнопку я добавляю шаблон (который содержит div) после кнопки. Если кнопка (или за пределами кнопки / меню, т. Е. Тела) будет нажата снова, я хотел бы скрыть элемент div, содержащийся в шаблоне.

Пока у меня есть следующее, но я не могу заставить isVisible обновить и скрыть div (меню)

Код основной директивы:

return {
        restrict: 'A',
        scope: {
        },
        link: function (scope, element, attr) {
            scope.isVisible = false;

            element.bind('click', function () {

                var menu = element.parent().find('.actionMenuDir');

                if (menu.length === 0) {

                    $templateRequest('app/directives/popupmenu/actionpopup.html').then(function(html) {
                        var template = angular.element(html);
                        element.after(template);
                        $compile(template)(scope);
                    });

                } else {
                    scope.isVisible = !scope.isVisible;
                }

                $compile(menu)(scope);

            });

        }

    }

Разметка шаблона:

<div class="actionMenuDir" ng-if="isVisible">
{{isVisible}}
<ul>
    <li>Menu Yo</li>
</ul>

Разметка кнопок с используемой директивой:

<button popup-menu type="button">BUTTON</button>