title: AngularJS - How to detect window resize + landscape / portrait orientation change event
body: <p>I've been trying some of the other suggestions I was able to find here on SO, but none worked. Basically, I need to update (re-render) a custom directive when the window size changes.</p>
  
  <h3>My code is the following:</h3>
  
  <pre><code>angular.module('dynamicSlideBox', []).directive('hgDynamicSlideBox', [
    '$timeout', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', '$window', function($timeout, $ionicSlideBoxDelegate, $ionicScrollDelegate, $window) {
      var linkFunction;
      linkFunction = function(scope, element, attrs, parent) {
        var disableScroll, ionContent, ionContentDelegate, ionicSlideBoxDelegate, modal, slideChanged, slideHandle, slider;
        slider = angular.element(element);
        modal = slider.closest('.popup-body');
        ionContent = slider.closest('.hg-dynamic-content');
        ionContentDelegate = ionContent.attr('delegate-handle');
        slideHandle = slider.attr('delegate-handle');
        ionicSlideBoxDelegate = $ionicSlideBoxDelegate;
        ionicSlideBoxDelegate.$getByHandle(slideHandle).enableSlide(false);
        if (slideHandle) {
          ionicSlideBoxDelegate = ionicSlideBoxDelegate.$getByHandle(slideHandle);
        }
        disableScroll = JSON.parse("[" + attrs.disableSlideScroll + "]");
        slideChanged = function() {
          $timeout((function() {
            $ionicScrollDelegate.resize();
          }), 50).then(function() {
            var currSlide, maxHeight, maxWidth, slideContents, slides;
            currSlide = ionicSlideBoxDelegate.$getByHandle(slideHandle).currentIndex() || 0;
            maxWidth = slider.width() + 'px';
            if (indexOf.call(disableScroll, currSlide) &gt;= 0) {
              $ionicScrollDelegate.$getByHandle(attrs.scrollHandle).freezeScroll(true);
            }
            maxHeight = 'none';
            slideContents = angular.element(slider[0].querySelectorAll('ion-slide &gt; .dynamic-slider-wrapper &gt; *'));
            slides = angular.element(slider[0].querySelectorAll('ion-slide &gt; .dynamic-slider-wrapper'));
            slideContents.css('max-height', maxHeight);
            $ionicScrollDelegate.scrollTop();
            maxHeight = slides[currSlide].getBoundingClientRect().height + 20 + 'px';
            slideContents.css('width', maxWidth);
            modal.css('height', maxHeight);
            $timeout((function() {
              $ionicScrollDelegate.resize();
            }), 50);
          });
        };
        scope.$on('slideBox.slideChanged', slideChanged);
        $timeout(slideChanged, 50);
        scope.$on('destroy', function() {
          element.remove();
        });
        angular.element($window).bind('resize', function() {
          console.log("resized window");
          ionicSlideBoxDelegate.update();
          $ionicScrollDelegate.resize();
          ionicSlideBoxDelegate.update();
          scope.$digest();
        });
      };
      return {
        require: "^ionSlideBox",
        restrict: 'A',
        link: linkFunction
      };
    }
  ]);
  </code></pre>
  
  <p>This is a custom directive that extends the ionic slide directive so that the content resizes based on the size of the window.
  This part works but only on slide change (as you can see from this <code>slideChanged()</code> function).</p>
  
  <p>Now I need to resize it on window size change (on mobile, if you navigate from landscape to portrait, for example.</p>
  
  <p>Can someone explain why this onResize (neither the console log) works?
  How can I achieve this?</p>
  
  <p>Ideally, it would be nice to just refresh the width but also a re-render is acceptable.</p>