How to set style in angularjs depending on a different element height after load?

I have a header element that has a dynamic height that is only initialised once. Now I want to set an element, say foo, in the scollable view of the angular app that has the height of the screen, MINUS the header height. So they fit perfectly onto the screen. Below the element that has height 100vh - dynamic size, are more elements.

I read one can use something like this:

var myHeight = angular.element(document.querySelector('#header'))[0].offsetHeight

and then say use it in dynamic inline styling e.g.

<foo style="height: calc(100vh - {{myHeight}})">

note, calc is a css function.

but where do I use it? when is my app loaded to get correct height?

via Chebli Mohamed