title: Detect height change (not resize) in AngularJs directive
body: <p>First of all, I know there are ways to detect when the screen size change by using:</p>
  
  <pre><code>angular.element($window).on('resize', function() {...
  </code></pre>
  
  <p>But in my case what happens is a change in the document height because of a <code>toggle</code> click I have. So it's not a resize, wich is not firing that event.</p>
  
  <p>Basically I have a div that can be toggled, via <code>ngClick</code> and <code>ngIf</code>, to show/hide it's cotent. In another area of the view, there is another div, controled by one directive, to apply a dynamic style. For example:</p>
  
  <pre><code>&lt;div class="toBeToggle"&gt;
      &lt;button ng-click="toggle = !toggle"&gt;Toogle&lt;/button&gt;
      &lt;p ng-if="!toggle"&gt;content to be toggled...&lt;/p&gt;
  &lt;/div&gt;
  [... more content ...]
  &lt;div class="toBeDynamic"&gt;
      &lt;div my-directive&gt;this div has dynamic styles&lt;/div&gt;
      [...]
  &lt;/div&gt;
  </code></pre>
  
  <p>So what I want is to receive/detect when the height change inside <code>myDirective</code>, but the toggle click is executed in other element.</p>
  
  <p>I tried this inside <code>myDirective</code> (as a desperate/last try - because watch isn't optimal):</p>
  
  <pre><code>scope.$watch( '$window.innerHeight', function( new, old ) {
      console.log( 'height change' );
  });
  </code></pre>
  
  <p>But also didn't worked. Nothing is detecting the height change. How can I do this?</p>