Angularjs 在angular.js中动态添加和删除事件

我是angular.js的新手，仍然在努力捕捉最佳实践。在这种特殊情况下，我不确定动态添加和删除事件处理程序的方法是什么

我创建了一个模拟我的问题的简化示例。在此示例中，用户可以从列表中的一个项目中进行选择。要选择项目，用户单击将显示列表的按钮。单击列表，选择将被更改，列表将隐藏

但是，我现在想做的是使用户能够单击页面上的任意位置以隐藏列表。使用jQuery方法，我将添加

单击
正文
或
文档
上的事件处理程序，这将更改视图状态并隐藏弹出列表

我已经用这种方法创建了一个示例。我的问题是：在angular.js中这是一个好的实践吗？它感觉有点像黑客

另外，请注意，我不想让事件处理程序一直出现在文档中，只在列表显示时才出现。
使用中描述的实践，我创建了一个指令，该指令应该处理显示/隐藏事件

.directive('toggleListDisplay', function($document) {
    return function(scope, element, attr) {
        var hideList = function (event) {
            scope.listDisplayed = false;
            $document.off('click', hideList);
            scope.$apply();
        };

        element.on('click', function(event) {
            event.stopPropagation();
            scope.listDisplayed = !scope.listDisplayed;
            if (scope.listDisplayed) {
                $document.on('click', hideList);
            } else {
                $document.off('click', hideList);
            }
            scope.$apply();
        });
    };
});

此指令将在元素上添加
click
事件处理程序，并开始查找文档上的单击，直到显示列表。当它不再显示时，它将停止监视文档上的
单击
事件

可以在上找到工作示例。
这有点粗糙。您应该使用指令来处理任何dom操作和事件侦听。将其放在指令中，这样您就可以不受dom操作的控制。我认为这是一种正确的方法，但在阅读了一些指令教程、示例和文档后，我仍然没有弄清楚如何实现它。这就是为什么我把它贴在stackoverflow上。如何创建将动态添加/删除的指令？