Как снять угловой наблюдатель с направляющего элемента?

У меня есть директива, которая выглядит так:

app.directive('mydirective', function($compile,$document){
    var directive = {
        restrict: 'EA',
        scope:{
        },
        link: link, 
    };  
    return directive; 

    function link(scope, element, attr) {
        var template_html = "<div id=\"popup\">{{popupTitle}}</div>";
        var template = angular.element(template_html);

        element.bind('click', function(){
                if(!$("#popup").is(':visible')){
                    var $popup = $compile(template)(scope);
                    $document.find('body').append($popup);
                }else{
                    $("#popup").remove();
                }
            });

        template.remove();

    }
});

Код работает отлично, показывая и удаляя popup-элемент при нажатии на mydirective. Но проблема возникает каждый раз, когда элемент показывает & скрывает, угловой наблюдатель просто продолжает расти. Количество увеличения наблюдателя зависит от количества привязок в template_html.

Как я могу заставить этих наблюдателей удаляться при удалении всплывающего окна, чтобы наблюдатели не накапливали увеличение с течением времени.