Scroll AngularJS ngRepeat with Ajax loading data

Question

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.

Answer 1

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

plunkr

  $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);
    });

Answer 2

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 :

Calling a function when ng-repeat has finished