javascript - Not sure how to hide a div when clicking OUTSIDE of the div -

this follow-up question question: angularjs input focus kills ng-repeat filter of list

basically code using angularjs pop-out div (a drawer) on right filtering list of things. times used ui blocked clicking on blocking div closes drawer. in cases don't block ui , need allow user click outside of drawer cancel search or select else on page.

my initial thought attach window.onclick handler when drawer opens , if clicked other drawer should close drawer. that's how in pure javascript app. in angular being bit more difficult.

here jsfiddle sample based on @yoshi's jsbin example: http://jsfiddle.net/tpeiffer/kdmn8/

the relevant piece of code sample below. if user clicks outside of drawer invoke $scope.togglesearch $scope.open set false.

the code works, , though $scope.open goes true false doesn't modify dom. i'm sure has lifecycle of events or perhaps when modify $scope (since separate event) copy , not original...

the ultimate goal on directive ultimate reusability. if can point me in right direction grateful.

$scope.togglesearch = function () {      $scope.open = !$scope.open;      if ($scope.open) {         $scope.$window.onclick = function (event) {             closesearchwhenclickingelsewhere(event, $scope.togglesearch);         };     } else {         $scope.$window.onclick = null;     } }; 

and

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();     }  } 

the drawer not closing because click event occurs outside digest cycle , angular doesn't know $scope.open has changed. fix can call $scope.$apply() after $scope.open set false, trigger digest cycle.

$scope.togglesearch = function () {     $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(); //--> trigger digest cycle , make angular aware.      } }; 

here fiddle.

i trying create directive search drawer, if helps (it needs fixes :)). here jsbin.