AngularJS - How to hide a div when clicking outside of it

Question

I have an angularjs application which use to open and hide a hidden div.

Here is a jsfiddle with a sample - jsfiddle

$scope.openLogin = function(){
    $scope.userLogin = true;
};
 $scope.hideLoginContainer = function(){
    $scope.userLogin = false;
};

When I click on the "Click Here" link it will show the user login div, so I need to hide this div when I click outside. The issue I am facing here is even i click inside the user login div it will hide.

any one know of any good ideas? Thanks

Answer 1

It should be worked, just edit: <div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;" >