angularjs ng-blur not working in Chrome or Firefox

I am using ui.bootstrap collapse directive to display drop down menu. I would like to automatically collapse it when user clicks outside of the div. When user clicks on Filter button I set focus using: ``` .directive('setFocus', function () { return { restrict: 'A', scope: { focusValue: "=setFocus" }, link: function ($scope, $element, attrs) { $scope.$watch("focusValue", function (currentValue, previousValue) { if (currentValue === true && !previousValue) { $element[0].focus(); console.log('set focus from setFocus directive'); } else if (currentValue === false && previousValue) { $element[0].blur(); console.log('blurr from setFocus directive'); } }) } } }); ``` HTML ``` <div collapse="isDropDownCollapsed" class='div2' align-element-right='el1' set-focus='!isDropDownCollapsed' ng-blur="toggleMenu()"> ``` Controller ``` app.controller('testCtrl', function ($scope) { $scope.isDropDownCollapsed = true; $scope.toggleMenu = function () { $scope.isDropDownCollapsed = !$scope.isDropDownCollapsed; } ``` }); It works in IE v11 but focus is also lost when check box is selected. It doesn't work in Chrome v38 or Firefox v33.1. example code