ng-blur on a DIV <p>I am trying to hide a <code>DIV</code> on blur (the focus has been removed from the <code>DIV</code>). I am using angular and bootstrap. So far I have tried setting "focus" on the <code>DIV</code> when it is shown and then an <code>ng-blur</code> function when the user click anywhere else on the screen. This is not working.</p> <p>Basically the problem is I cannot set focus on my "<code>#lockerBox</code>" through JS, my "<code>hideLocker</code>" function works no problem when focus is given to my <code>DIV</code> with clicking it. </p> <pre><code>&lt;div class="lock-icon" ng-click="showLocker(result); $event.stopPropagation();"&gt;&lt;/div&gt; &lt;div ng-show="result.displayLocker" id="lockerBox" ng-click="$event.stopPropagation();" ng-blur="hideLocker(result)" tabindex="1"&gt; $scope.displayLocker = false; $scope.showLocker = function ( result ) { $scope.displayLocker = !$scope.displayLocker; node.displayLocker = $scope.displayLocker; function setFocus() { angular.element( document.querySelector( '#lockerBox' ) ).addClass('focus'); } $timeout(setFocus, 100); }; $scope.hideLocker = function ( node ) { $scope.displayLocker = false; node.displayLocker = $scope.displayLocker; }; </code></pre>