title: AngularJS - How to hide a div when clicking outside of it
body: <p>I have an angularjs application which use to open and hide a hidden div. </p>
  
  <p>Here is a jsfiddle with a sample - <a href="http://jsfiddle.net/f3feU/6/" rel="noreferrer">jsfiddle</a></p>
  
  <pre><code>$scope.openLogin = function(){
      $scope.userLogin = true;
  };
   $scope.hideLoginContainer = function(){
      $scope.userLogin = false;
  };
  </code></pre>
  
  <p>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. </p>
  
  <p>any one know of any good ideas? 
  Thanks</p>