Angular. How to know when the content of a variable has finished rendering to the DOM?

Question

JavaScript

Greetings.
I have an application in Angular.
The text is received from the server, placed in the $scope.variable variable and displayed on the page {{variable}}
After the text is displayed, a script is fired that creates a custom scroll. For this script, the height of the element in which the text is placed is important.
The problem is that the text from the server can have different sizes. From a couple of lines of text to a dozen printed pages.
Now the script for scrolling is triggered by a timeout. That is, data is received from the server, after 200mc the scroll script is called. But due to the fact that the text can be very large, this time is not always enough. The text does not have time to be drawn to the end, as a result, the height of the container with the text is incorrect and the result is incorrect.
Is it possible to somehow track the end of the rendering, so that immediately after that, call the script to scroll?
PS Do not offer an option to increase the timeout. This does not fit.
Thank you.

Answer 1

Well, in general, you have the wrong approach. You are trying to write in JQuery style. Hang watch on the height of your block, and as soon as it changes, move the page. Since $watch works on declaration too, the first time you will call something like "make a scroll by 0px", but when the content is full, $watch will be executed again "make a scroll by 200px". Here is a similar challenge
stackoverflow.com/questions/19048985/angularjs-bet...

Answer 2

Have you tried just $timeout(/**/, 0)?
You need to exit the current $digest loop before polling the height.