It's a timing issue.
If you do the following:
var scrollToBottom = function () {
console.log(element[0].scrollHeight);
element[0].scrollTop = element[0].scrollHeight;
};
You will notice that after a few inputs the scrollHeight
at the time of setting scrollTop
will differ.
I haven't dug deeper into the source code to see what causes this, but you can use $evalAsync
to make sure the code is run after the DOM has been maniuplated by Angular, but before the browser renders:
var scrollToBottom = function() {
scope.$evalAsync(function() {
element[0].scrollTop = element[0].scrollHeight;
});
};