How to hide div clicking anywhere on page?

Question

Ok i have main header controller where i have this:

<div class="fade-show-hide" ng-class="{'ng-hide':loggedInClose==true}" ng-show="loggedInOpened" ng-cloak>
@Html.Partial("~/Views/Shared/_LoggedInPartial.cshtml")
</div>

In script i have this:

$scope.loggedInClose = false;

  $scope.toggleLoggedIn = function () {
        $scope.loggedInOpened = !$scope.loggedInOpened;
        $scope.languagesOpened = false;
        $scope.loginOpened = false;  
    };

Problem is when i use this code nothing happend...i get $scope.loggedInClose = true; but div is not hide ...

angular.element(document).on('click', function () {

    $scope.loggedInClose = true;

});

Can someone explain me how to hide div if i click anywhere on page that?

Answer 1

I hope you put this event listener in directive, not in controller? :) Anyway, you need to tel Angular to update scope bindings. For this call $apply method to kick off new digest:

angular.element(document).on('click', function () {
    $scope.loggedInClose = true;
    $scope.$apply();
});