title: AngularJS directive watch parent size change
body: <h1>Problem</h1>
  
  <p>I have a simple directive that executes sizing updates on a particular element.  This watches the window size and makes adjustments accordingly.</p>
  
  <pre><code>MyApp.directive('resizeTest', ['$window', function($window) {
    return {
      restrict: 'AC',
      link: function(scope, element) {
        var w = angular.element($window);
        scope.$watch(function() {
          return { 'h': w.height(), 'w': w.width() };
        }, function(newValue, oldValue) {
          // resizing happens here
        }, true);
        w.bind('resize', function() { scope.$apply(); });
      }
    };
  }]);
  </code></pre>
  
  <p>This works just fine.</p>
  
  <p>It just so happens that inside of the <code>div</code> tag that is associated with, I have a child <code>div</code>.  When the parent is resized, I want to make positioning alterations on the child element.  However, I cannot get the trigger to fire.</p>
  
  <p>This gets called at startup, but does not get triggered when the element is resized or the window changes:</p>
  
  <pre><code>MyApp.directive('centerVertical', ['$window', function($window) {
    return {
      restrict: 'AC',
      link: function(scope, element) {
        element.css({border: '1px solid #0000FF'});
        scope.$watch('data.overlaytype', function() {
          $window.setTimeout(function() {
            console.log('I am:      ' + element.width() + 'x' + element.height());
            console.log('Parent is: ' + element.parent().width() + 'x' + element.parent().height());
          }, 1);
        });
      }
    };
  }]);
  </code></pre>
  
  <p>What type of binding or watch configuration should I be using to check for resizing of the parent element?</p>
  
  <h1>Fiddle</h1>
  
  <p><a href="https://jsfiddle.net/rcy63v7t/1/">https://jsfiddle.net/rcy63v7t/1/</a></p>