Изменение в $ document.on ('click') не отображается в поле зрения

Question

У меня есть угловая директива ngx-notifications, она находится внутри контроллера MenuBarController.

Посмотреть

<div class="row" ng-controller="MenuBarController"> 
... 
    <span ng-click="ShowNotifications()">click me</span> 
    <div ng-show="NotificationsVisible" ngx-notifications="NotificationsVisible"> 

Контроллер

$scope.NotificationsVisible = false; 

function ShowNotifications(){ 
    $scope.NotificationsVisible = !$scope.NotificationsVisible; 
} 


setInterval(function(){ 
    console.log($scope.NotificationsVisible); 
},1000); 

Директива

angular.module('app').directive('ngxNotifications', NotificationsDirective); 

NotificationsDirective.$inject = ['$document']; 
function NotificationsDirective($document) { 

    return { 
    restrict: "A", 
    scope: false, 
    link: function ($scope, $elem, $attr) { 
     var key = $attr.ngxNotifications; 

     $document.on("click",function ($e) { 
     if(!$elem[0].contains($e.target)){ 
      console.log($scope,key); // logs correct scope and key 
      //neither of the two following lines are reflected in the view 
      $scope[key] = false; 
      $scope.NotificationsVisible = false; 

     } 
     }); 

    } 
    } 
} 

span[ng-click] переключает видимость моего окна уведомлений, но по какой-то причине, когда мой directive меняет его на $document.on('click'), угловой не подбирает изменения, несмотря на то, что мой setTimeout в controller показывает, что значение HAS изменилось. Почему это?

Я не могу создать отдельный раздел между моим контроллером и моей директивой, мне просто нужно добавить эту дополнительную функциональность.

Answer 1

Как я и подозревал, по какой-то причине метод $document::on не является частью углового дайджеста, добавив $scope.$apply работал, но это на самом деле не имеет смысла (я никогда не покидал угловой код для изменения модели):

$document.bind("click",function ($e) { 
    if($scope[key] && !$elem[0].contains($e.target)){ 
    $scope.$apply(function() { 
     $scope[key] = false; 
    }); 
    } 
});