How to automatically scroll to the bottom in AngularJS?

Question

In my AngularJS app there is a controller which contains a list with messages:

$scope.messages = []

This list is updated as the application runs. In the template it is rendered in the following way:

<div style="height: 200px; overflow: auto">
...
    <li ng-repeat="msg in messages">{{msg}}</li>
...

But when more messages comes than fits the 200px height, the scroll remains on the top.

How to automatically scroll to the bottom of the message list?

Answer 1

There is a directive "scroll-glue" from this library https://github.com/Luegg/angularjs-scroll-glue that solves the problem.

Just add scroll-glue directive to the div:

<div style="height: 200px; overflow: auto" scroll-glue>
...