title: listen for fulscreenChange event in angularJs
body: <p>I am using a button to slip a DOM element into fullscreen mode using the fullscreen API. this part works as expected. The issue iss that when i exit fullscreen mode i need to listen for the fullscreen change event and resize the dom element. Here is what i am currently trying:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary" ng-click="changeVideoSize(4)"&gt;Fullscreen&lt;/button&gt;
  </code></pre>
  
  <p>Angular Controller:</p>
  
  <pre><code>$scope.changeVideoSize = function(size) {
  
      switch (size) {
  
      case 1:
          resizeDiv("swfStage" , "320px" , "240px");
          break;
      case 2:
          resizeDiv("swfStage" ,"500px" ,"375px" );
          break;
      case 3:
          resizeDiv("swfStage" , "700px" , "525px" );
      break;
      case 4:
          fullScreenToggle("swfStage");
          resizeDiv("swfStage",getWidth(),getHeight());
          break;
      default:
          $scope.changeVideoSize(1);
      }
  
  };
  
  function fullScreenToggle(domId) {
  
      // full-screen available?
      if (
          document.fullscreenEnabled || 
          document.webkitFullscreenEnabled || 
          document.mozFullScreenEnabled ||
          document.msFullscreenEnabled
      ) 
      {
          var elem = document.getElementById(domId);
          if (elem.requestFullscreen) {
              elem.requestFullscreen();
          } else if (elem.msRequestFullscreen) {
              elem.msRequestFullscreen();
          } else if (elem.mozRequestFullScreen) {
              elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
              elem.webkitRequestFullscreen();
          }   
      }
  
  
  }
  
  // Events
  $scope.$on("fullscreenchange", function(e) {
      console.log("fullscreenchange event! ", e);
  });
  $scope.$on("mozfullscreenchange", function(e) {
      console.log("mozfullscreenchange event! ", e);
  });
  $scope.$on("webkitfullscreenchange", function(e) {
      console.log("webkitfullscreenchange event! ", e);
  });
  $scope.$on("msfullscreenchange", function(e) {
      console.log("msfullscreenchange event! ", e);
  });
  </code></pre>
  
  <p>I did not include the logic for the resize div function but it does work. My issue is that when I call fullScreenToggle() specifically elem.requestFullscreen() in any of the variations i would expect to see a fullscreen change event fired ... but it either is not ... or im not listening to it correctly .. </p>