How to start scroll list from the bottom? - angularjs

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.