Need div to close on window click

Sample to test hiding div when window is clicked on

HTML

<!DOCTYPE html>
<body ng-app="app" ng-controller="ImpersonateController">
    <section class="impersonate">
        <div header></div>
        <ul>
            <li ng-repeat="item in items | filter:search" id="{{item.name}}" name="{{item.name}}" tap="SelectUser('{{item.id}}')">{{item.name}}</li> <pre>{{search}}</pre>

            <button class="handle handle-right" ng-click="toggleSearch()">Filter</button>
            <div ng-click="toggleSearch()"></div>
            <div class="drawer drawer-right" ng-class="{expanded: open, collapsed: !open}">Search
                <br />
                <input class="SearchBox" ng-model="$parent.search.name" focus="{{open}}" type="text">
            </div>
    </section>
</body>

CSS

/* Put your css in here */
 .icon-search:before {
    content:"\f002";
}
.drawer {
    background-color: rgb(219, 224, 228);
    /* benjamin moore - sidewalk gray */
    color:#fff;
    -moz-overflow-scrolling: touch;
    -ms-overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100%;
    height: 100%;
}
.drawer-right {
    left: auto;
    right: 0;
}
.drawer.collapsed {
    width: 0px;
    border: none;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}
.drawer.expanded {
    width: 50%;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}
.handle {
    font-size:18px;
    position: absolute;
    margin-left:25px;
    line-height:52px;
    cursor: pointer;
}
.handle-right {
    top: 0;
    right: 0;
    margin-right: 25px;
    margin-left: auto;
}

JavaScript

(function (app, ng) {
    'use strict';

    app.controller('ImpersonateController', ['$scope', '$window', function ($scope, $window) {

        $scope.$window = $window;

        $scope.items = [{
            name: 'foo'
        }, {
            name: 'bar'
        }, {
            name: 'foobar'
        }, {
            name: 'barfoo'
        }];
        $scope.open = false;
        $scope.toggleSearch = function () {
            console.log('toggle')
            $scope.open = !$scope.open;

            if ($scope.open) {
                $scope.$window.onclick = function (event) {
                    closeSearchWhenClickingElsewhere(event, $scope.toggleSearch);
                };
            } else {
                $scope.open = false;
                $scope.$window.onclick = null;
                $scope.$apply();
            }
        };

        function closeSearchWhenClickingElsewhere(event, callbackOnClose) {

            var clickedElement = event.target;
            if (!clickedElement) return;

            var elementClasses = clickedElement.classList;
            var clickedOnSearchDrawer = elementClasses.contains('handle-right') || elementClasses.contains('drawer-right') || (clickedElement.parentElement !== null && clickedElement.parentElement.classList.contains('drawer-right'));

            if (!clickedOnSearchDrawer) {
                callbackOnClose();
                return;
            }

        }

    }]);
    app.directive('focus', function ($timeout) {
        return {
            scope: {
                trigger: '@focus'
            },
            link: function (scope, element) {
                scope.$watch('trigger', function (value) {
                    if (value === "true") {
                        $timeout(function () {
                            element[0].focus();
                        });
                    }
                });
            }
        };
    });
}(angular.module('app', []), angular));