title: Understanding window resize event with scope.$apply with $watch on a function
body: <p>Recently I found this <a href="http://jsfiddle.net/jaredwilli/SfJ8c/" rel="nofollow">http://jsfiddle.net/jaredwilli/SfJ8c/</a> and I am able to get it works.</p>
  
  <pre><code>var app = angular.module('miniapp', []);
  
  app.directive('resize', function ($window) {
      return function (scope, element) {
          var w = angular.element($window);
          scope.getWindowDimensions = function () {
              return {
                  'h': w.height(),
                  'w': w.width()
              };
          };
          scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
              scope.windowHeight = newValue.h;
              scope.windowWidth = newValue.w;
  
          }, true);
  
          w.bind('resize', function () {
              scope.$apply();
          });
      }
  })
  </code></pre>
  
  <p>But the problem is, I don't know how it works? Why <code>scope.$apply()</code>? What is the purpose of it? Why <code>scope.getWindowDimensions</code> will get updated when window is resized?</p>