AngularJS: Hide $element when clicked outside.

var app = angular.module('MyApp', [])
.controller('SettingsCtrl', function($scope, $window, $element) {
	$scope.isOpen = false;

	$scope.slideDown = function (event) {
		$scope.isOpen = !$scope.isOpen;
		// Click was out of scope
		$scope.$apply();
	};

	$scope.setOpen = function() {
		$scope.isOpen = !$scope.isOpen;
	};
})
.directive('clickAnywhereButHere', function($document) {
    return {
        restrict: 'A',
        scope: {
            callback : '=clickAnywhereButHere'
        },
        link: function(scope, element, attr, ctrl) {
            var handler = function(event) {
                if (!element[0].contains(event.target)) {
                    scope.callback(event);
                 }
            };

            $document.on('click', handler);
            scope.$on('$destroy', function() {
                $document.off('click', handler);
            });
        }
    }
});

<!DOCTYPE html>
<html ng-app="MyApp">

<head lang="en">
    <meta charset="utf-8">
    <title>Hide element</title>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
</head>

<body>
    <div id="content">
    <h1>
        This shows how to collapse an element when clicked outside of it.
    </h1>
        <div id="app-navigation">
            <div id="app-settings" ng-controller="SettingsCtrl" ng-class="{'open': isOpen}">
                <div id="app-settings-header">
                    <button class="settings-button" tabindex="0" ng-click="setOpen($event)">Settings</button>
                </div>
                <div id="app-settings-content" click-anywhere-but-here="slideDown">
                    <dl>
                        <dt>Login</dt>
                        <dd>
                            <input ng-model="user.login" type="text" />
                        </dd>
                        <dt>Password</dt>
                        <dd>
                            <input ng-model="user.password" type="password" />
                        </dd>
                    </dl>
                    <button>Login</button>
                </div>
            </div>
        </div>
        <div id="app-content"></div>
    </div>
</body>
</html>

/* CSS goes here */
body {
    font-family: sans-serif;
}
h1 {
    width: 100%;
    border-bottom: thin solid silver;
    margin: 0;
    background-color: #EEE;
}
#content {
    height: 100%;
    position: absolute;
    width: 100%;
}

#app-navigation {
    box-sizing: border-box;
    background-color: #F8F8F8;
    border-right: 1px solid #CCC;
    float: left;
    height: 100%;
    padding-bottom: 44px;
    width: 300px;
}

#app-settings {
    border-top: 1px solid #CCC;
    bottom: 0;
    position: fixed;
    width: 299px;
}

#app-settings.open #app-settings-content {
    display: block;
    max-height: 300px;
    overflow-y: auto;
}

#app-settings-header {
    background-color: #EEE;
}

#app-settings-content {
    background-color: #EEE;
    display: none;
    padding: 10px;
}

#app-settings.open #app-settings-content {
    display: block;
    max-height: 300px;
    overflow-y: auto;
}

.settings-button {
    background-color: rgba(0, 0, 0, 0);
    background-position: 10px center;
    background-repeat: no-repeat;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    display: block;
    height: 44px;
    margin: 0;
    padding: 0;
    width: 100%;
    font-weight: bold;
}

#app-content {
    height: 100%;
    overflow-y: auto;
}