title: angular.element($window).scrollTop() is throwing "is not a function" with webpack
body: <p>I am using Angularjs for my frontend development. Recently I started implementing Webpack then I realized that angular.element($window).scrollTop() stopped working and started throwing error as "windowElement.width is not a function". Following are old code and new code with webpack.</p>
  
  <p>Old working code:</p>
  
  <pre><code>app.directive("ajnav", ['$window', '$location', function ($window, $location) {
          return {
              restrict: "E",
              templateUrl: "/templates/common/AJNav.html",
              replace: true,
              scope: {
                  seo: '=',
                  conf: '='
              },
              link: function (scope, element, attrs) {
                  //Bind event change the postion of AJ Nav on scroll
                  var windowElement = angular.element($window);
                  var onScrollHandler = function () {                    
                      //Get current height of iNav.
                      var iNavHeight = $("#iNavNGI_Header").height();
                      if (windowElement.scrollTop() &gt; iNavHeight) {
                          $(element).addClass('navbar-fixed-top');
                          $(element).removeClass('aj-nav-container-absolute');
                      }
                      else {
                          $(element).removeClass('navbar-fixed-top');
                          $(element).addClass('aj-nav-container-absolute');
                      }
                  };
                  //Bind event handler on scroll
                  windowElement.on('scroll', scope.$apply.bind(scope, onScrollHandler));                
              }
  
          };
      }]);
  </code></pre>
  
  <p>New code with webpack is throwing error: </p>
  
  <pre><code>var $ = require("jquery");
  var angular = require("angular");
  var Utilities = require("./../../utilities/Utilities");
  var AppUtilities = require("./../../utilities/AppUtilities"); 
  module.exports = ['$window', '$location', function ($window, $location) {
          return {
              restrict: "E",
              templateUrl: "/templates/common/AJNav.html",
              replace: true,
              scope: {
                  seo: '=',
                  conf: '='
              },
              link: function (scope, element, attrs) {
                  //Bind event change the postion of AJ Nav on scroll
                  var windowElement = angular.element($window);
                  var onScrollHandler = function () {
                      //Get current height of iNav.
                      var iNavHeight = $("#iNavNGI_Header").height();
                      if (windowElement.scrollTop() &gt; iNavHeight) {
                          $(element).addClass('navbar-fixed-top');
                          $(element).removeClass('aj-nav-container-absolute');
                      }
                      else {
                          $(element).removeClass('navbar-fixed-top');
                          $(element).addClass('aj-nav-container-absolute');
                      }
                  };
                  //Bind event handler on scroll
                  windowElement.on('scroll', scope.$apply.bind(scope, onScrollHandler));                
              }
  
          };
      }];
  </code></pre>
  
  <p>Follownig is stacktrace for the exception I am getting.</p>
  
  <pre><code>TypeError: windowElement.scrollTop is not a function
      at module.exports.link.onScrollHandler (site.min.js:42181)
      at Scope.$get.Scope.$eval (ite.min.js:25066)
      at Scope.$get.Scope.$apply (site.min.js:25165)
      at eventHandler (site.min.js:12594)
  </code></pre>
  
  <p>I am binding this directive in my entry poing App.js as below</p>
  
  <pre><code>app.directive("ajnav", require("./directives/common/AJNav"));
  </code></pre>
  
  <p>I tried all the option I could but not able to fix it. Please help.</p>