Track window innerwidth

<!DOCTYPE html>
<html ng-app="App">

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <pre>
      Window innerWidth = {{windowMetrics.innerWidth}}
      
      Resize the window to see the above value update.
    </pre>
  </body>

</html>

// Code goes here

(function() {
        'use strict';
 
 
        angular.module('App', [])
        .constant('EVENT_WINDOW_INNER_WIDTH', 'EVENT_WINDOW_INNER_WIDTH')
        .constant('EVENT_WINDOW_INNER_HEIGHT', 'EVENT_WINDOW_INNER_HEIGHT')
        .run(['$rootScope', '$window', '$log', 'EVENT_WINDOW_INNER_WIDTH', 'EVENT_WINDOW_INNER_HEIGHT',
        function($rootScope, $window, $log, EVENT_WINDOW_INNER_WIDTH, EVENT_WINDOW_INNER_HEIGHT) {
            $rootScope.windowMetrics = {
              innerWidth : $window.innerWidth
            };
            $rootScope.getWidth = function() {
                return $window.innerWidth;
            };
 
 
            $rootScope.$watch($rootScope.getWidth, function(newInnerWidth, oldInnerWidth) {
                $rootScope.$broadcast(EVENT_WINDOW_INNER_WIDTH, {
                    newInnerWidth : newInnerWidth,
                    oldInnerWidth : oldInnerWidth
                });
            });
 
 
            angular.element($window).on('resize', function(event) {
                $rootScope.$apply();
            });
 
 
            $rootScope.$on(EVENT_WINDOW_INNER_WIDTH, function(event, change) {
                $log.info("window innerWidth changed : \n" + JSON.stringify(change, null, "  "));
                $rootScope.windowMetrics.innerWidth = $window.innerWidth;
            });
            
            
        }]);
    }());

/* Styles go here */