title: angularjs ng-blur not working in Chrome or Firefox
body: <p>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.</p>
  <p>When user clicks on Filter button I set focus using:</p>
  <pre><code>.directive('setFocus', function () {
           return {
              restrict: 'A',
              scope: {
                  focusValue: &quot;=setFocus&quot;
              },
              link: function ($scope, $element, attrs) {
                  $scope.$watch(&quot;focusValue&quot;, function (currentValue, previousValue) {
                      if (currentValue === true &amp;&amp; !previousValue) {
                          $element[0].focus();
                          console.log('set focus  from setFocus directive');
                      } else if (currentValue === false &amp;&amp; previousValue) {
                          $element[0].blur();
                          console.log('blurr from setFocus directive');
                      }
                  })
          }
          }
  });
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;div collapse=&quot;isDropDownCollapsed&quot; class='div2' align-element-right='el1' set-focus='!isDropDownCollapsed' ng-blur=&quot;toggleMenu()&quot;&gt;
  </code></pre>
  <p>Controller</p>
  <pre><code>app.controller('testCtrl', function ($scope) {
  $scope.isDropDownCollapsed = true;
  $scope.toggleMenu = function () {
      $scope.isDropDownCollapsed = !$scope.isDropDownCollapsed;
  }
  </code></pre>
  <p>});</p>
  <p>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.</p>
  <p><a href="http://jsfiddle.net/witepo/kkccwqj8/" rel="nofollow noreferrer">example code </a></p>