title: AngularJS closing a div which shows up on ng-click
body: <p>I created a button</p>
  
  <pre><code>&lt;button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"&gt;&lt;/button&gt;
  </code></pre>
  
  <p>Which shows a <code>&lt;div ng-show=appearOnChoice&gt;</code>on click and toggles back when clicking again!</p>
  
  <pre><code> $scope.chooseOptions=function(){
      $scope.appearOnChoice=!$scope.appearOnChoice;
  
    }
  </code></pre>
  
  <p>However, I also want this element to hide again, when the user clicks anywhere outside this <code>div</code>
  element. How can I do this? I need strictly stick with AngularJS and not use jQuery.</p>
  
  <p>Hope you can help me with that.</p>
  
  <p>EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly</p>
  
  <pre><code> $scope.$on('datepicker.focus', focusElement);
   scope.$watch('isOpen', function(value) {
          if (value) {
            scope.$broadcast('datepicker.focus');
            scope.position = appendToBody ? $position.offset(element) : $position.position(element);
            scope.position.top = scope.position.top + element.prop('offsetHeight');
  
            $document.bind('click', documentClickBind);
          } else {
            $document.unbind('click', documentClickBind);
          }
        });
    var focusElement = function() {
      $timeout(function() {
        self.element[0].focus();
      }, 0 , false);
    };
  </code></pre>
  
  <p>How can I adapt this to my case?!</p>