$window.onblur randomly stops working

Question

I have it running fine on safari right now and not always working in chrome:

app.controller(.... function($window){
  $window.focus();

  $window.onfocus = function(){
    $scope.inFocus = true;
  };

  $window.onblur = function (){
    console.log("onblur");
    $scope.inFocus = false;
  };

});

The console.log is not always triggered. I was wondering if that was a bug or something I am doing wrong?

Update: I tried the solution given by @Gabe. It is still breaking sometimes, I am wondering if another action is interfering with it. It does look random though...

Update 2: I still don't know how it gets stuck, but I know how to get it unstuck:

1. I click on an input in the window to focus it.
2. I click outside of the input to unfocus.
3. I switch tab and back in. It works again.

Answer 1

Try using the API for angular.element instead

angular.element($window).bind('blur', function (){
  console.log("onblur");
  $scope.inFocus = false;
});

http://plnkr.co/edit/khYHeJlvn2uCzKeTjndM