AngularJS watch element height change in directive
<p>I realize there were several similar questions, I checked them but they don't seem to cover my case.
So I have a fluid flexbox-based layout. Most of the window is used by <code>container</code> block, that shrinks when his siblings appear. Basically something like</p>

<pre><code>&lt;body&gt;
    &lt;div class="menu"&gt;&lt;/div&gt;
    &lt;div class="contact"&gt;&lt;/div&gt;
    &lt;div class="container"&gt;&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>the <code>container</code> height is not changed directly, it's recalculated by browser when I toggle other elements, such as <code>menu</code>.</p>

<p>I want to watch the <code>container</code> height and recalculate some elements in the directive. I watch for its height like this</p>

<pre><code>scope.$watch(()=&gt;parentElement.prop('offsetHeight'), resize);
resize=()=&gt;{console.log('resize called');};
</code></pre>

<p>problem is the resize is triggered only on the <strong>next</strong> digest. so when I toggle the menu for the first time nothing happens, on the second the resize is called but with previous (first call) dimensions and so on.</p>

<p>I realize that it's most likely because the browser resize does not trigger the digest, but the functions that show the menu use $rootScope, so some digest call should occur. </p>

<p>Is there a way to properly watch for element dimensions in this case? </p>

<p>UPD: if I remove the watch filter and listen to every event, I get to resize function when I trigger the menu (obviously it's the rootScope caused call) but the parent element height is still old. Maybe there is a way to defer the watcher? ideally not by timeout but by some event.</p>