AngularJS - Closing Dropdown menus

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <title>Example - example-example14-production</title>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="docsRestrictDirective">
    <div ng-controller="Controller" class="row">
      <div class="col-xs-8 col-xs-offset-2 text-center">
        <h1>Closing dropdowns</h1>
        <p class="lead">How to close dropdowns by clicking outside the dropdown.</p>
        <user-dropdown class="col-xs-6"></user-dropdown>
        <project-dropdown class="col-xs-6"></project-dropdown>
      </div>
    </div>
  </body>

</html>

(function(angular) {
  'use strict';
angular.module('docsRestrictDirective', [])
  .controller('Controller', ['$scope', function($scope) {
  }])
  .directive('userDropdown', ['$document', function($document) {
    return {
      restrict: 'E',
      templateUrl: 'user-dropdown.html',
      link: function(scope, element, attr) {
        scope.isUserDropdownVisible = false;

        scope.toggleUserDropdown = function(){
          console.log("Users");
          scope.isUserDropdownVisible = !scope.isUserDropdownVisible;
        }
        
        $document.bind('click', function(event){
          var isClickedElementChildOfPopup = element
            .find(event.target)
            .length > 0;
            
          if (isClickedElementChildOfPopup)
            return;
            
          scope.isUserDropdownVisible = false;
          scope.$apply();
        });
      }
    };
  }])
  .directive('projectDropdown', ['$document', function($document) {
    return {
      restrict: 'E',
      templateUrl: 'project-dropdown.html',
      link: function(scope, element, attr) {
        scope.isProjectDropdownVisible = false;

        scope.toggleProjectDropdown = function(){
          console.log("Projects");
          scope.isProjectDropdownVisible = !scope.isProjectDropdownVisible;
        }
        
        $document.bind('click', function(event){
          var isClickedElementChildOfPopup = element
            .find(event.target)
            .length > 0;
            
          if (isClickedElementChildOfPopup)
            return;
            
          scope.isProjectDropdownVisible = false;
          scope.$apply();
        });
      }
    };
  }]);
})(window.angular);

<ul class="list-inline">
  <li class="user-dropdown fancy-dropdown" ng-class="{open:isUserDropdownVisible}">
    <button class="btn btn-primary btn-lg btn-block" ng-click="toggleUserDropdown()">User <small>({{ isUserDropdownVisible }})</small></button>
    <ul class="list-group menu">
      <li class="list-group-item"><a href="#">Profile</a></li>
      <li class="list-group-item"><a href="#">Alerts</a></li>
      <li class="list-group-item"><a href="#">Logout</a></li>
    </ul>
  </li>
</ul>

<ul class="list-inline">
  <li class="project-dropdown fancy-dropdown" ng-class="{open:isProjectDropdownVisible}">
    <button class="btn btn-default btn-lg btn-block" ng-click="toggleProjectDropdown()">My Projects <small>({{ isProjectDropdownVisible }})</small></button>
    <ul class="list-group menu">
      <li class="list-group-item"><a href="#">Project name 1</a></li>
      <li class="list-group-item"><a href="#">Project name 2</a></li>
      <li class="list-group-item"><a href="#">Project name 3</a></li>
    </ul>
  </li>
</ul>

.list-inline {
  width: 180px;
}
.list-inline>li { width: 100%; }

.fancy-dropdown .menu {
  display: none;
}

.fancy-dropdown.open .menu, .fancy-dropdown:hover .menu {
  display: block;
}