How to start scroll list from the bottom?

Question

I'm working on a chatapp and like most chatapps my app shows a list of messages.

• The list is generated with ng-repeat.
• I have reversed the messages so that the newest are at the bottom and oldest at the top.

Currently when my app loads the list is scrolled down with

$ionicScrollDelegate

I don't like it doing it this way. It's not the correct way and sometimes this gives me some performance and loading issues when opening my app.

I was wondering if there is another, forced way, to start/render the list from the bottom to the top without the need for scrolling it to the bottom like I do now.

This is the code I currently use:
In my HTML:

<script type="text/ng-template" id="home.html">
    <ion-view ng-controller="HomeController" title="Home">
        <ion-content>
            <ion-list>
                <ion-item ng-repeat="message in messages track by $index">
                    {{message}}
                </ion-item>
            </ion-list>
        </ion-content>    
    </ion-view>
</script>

In my app.js:

app.run(function($ionicPlatform, $state, $timeout, $localStorage, $location, $rootScope, $ionicScrollDelegate) {
    document.addEventListener('deviceReady', function() {
        setTimeout(function() {
                $ionicScrollDelegate.scrollBottom(true);
        }, 500);
    });
})

Answer 1

Add a watch instead:

 $scope.$watch('messages', function(newValue, oldValue) {
   $ionicScrollDelegate.scrollBottom(true);
 }, true);

The reason you are getting this behaviour is cause deviceReady does not guarantee that the items are rendered yet, which causes your list to not scroll anywhere at all. With a watch, you'll scroll when the array has been loaded and the values are already there.