First of all a plunk: http://embed.plnkr.co/C866y3LHCE7QfBGuFQPQ/preview
So here I'm getting a set of posts via Ajax and displaying them using ngRepeat. Then (when the posts are done rendering) I want to scroll the page to a specific post (let's say post №18). Seems simple, but I can't get it working.
The problem seems to be that angular can't find that post after it receives the data from Ajax, so the position() and scrollTop() functions are not working.
You have to wait until after the view has been updated with your new model, use $timeout waiting 0 milliseconds to scroll immediately after the DOM is ready
$scope.getPosts = function() {
$http.get(data_url).success(function(data){
$scope.posts = data;
$timeout(function() {
var post = $('#pid_18');
console.log('pid_18', post);
$('body').scrollTop(post[0].offsetTop);
}, 0);
});
I think the problem is that the render is not finish then if you have 2 element it's could be work but not with 1000.
So the best way is to know when the rendering is finish, a related post :
