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

Question

I have a header element that has a dynamic height that is only initialized once. Now I want to set an element, say foo, in the scrollable 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 the correct height?

Answer 1

Try this

$scope.$on('$viewContentLoaded', function(){
   //Here your view content is fully loaded !!
});

there are some more ways for more info you can check this