将div onload滚动到底部，以及在使用新数据更新时滚动-angularjs

我想从本质上重新创建iPhone的“消息”应用程序的行为，并使用Angularjs（或说实话的其他任何js）以webapp形式重新创建。我有一个div，其中包含我的所有消息，然后每个消息也是一个很好控制的元素。当用户加载message指令时，我希望div容器基本上在底部加载，然后当新消息进入容器时，我希望div自动滚动到底部。

到目前为止，我能想到的最好的事情是：

window.setInterval(function() {
   var elem = document.getElementById('data');
   elem.scrollTop = elem.scrollHeight;
}, 4000);

我使用的是Angular，所以放入的任何东西都很好，但是我尝试/发现的所有内容似乎都有些古怪，无法完全复制与“消息”应用程序相同的行为。

编辑：

我也尝试过

$scope.$watch('messages',function(){
    console.log('messages changed')
    var elem = document.getElementById('messageDiv');
    elem.scrollTop = elem.scrollHeight;
});

令人沮丧的是，这在加载时不起作用，此外，如果我在Chrome开发者控制台中执行该功能，它将自动滚动到底部！