$ anchorScroll for the asynchronously linked element id

Given this markup:

<li ng-repeat="i in items" ng-attr-id="id-{{i}}">{{i}}</li>

      

        
        
        
      

    

Typing $anchorScroll

(so that it is created) will cause the window to scroll to the anchored id if it matches the hash in the url, so it /#id-4

will scroll until it loads.

.controller('myCtrl', function($scope, $location, $timeout, $anchorScroll) {
  $scope.items = [1,2,3,4];
})

      

        
        
        
      

    

Unexpectedly, if the binding is $scope

loaded asynchronously, it $anchorScroll

doesn't work automatically OR manually, calling $anchorScroll()

at any time, even in a directive where I can check that the id is already set. This puzzles me.

Demo here (comment on / from the original $ scope binding).

Here's what I came up with, but it looks like using $anchorScroll

should be a more natural way. In fact, it works in the demo, but very strangely it doesn't work in my project.

.directive('anchorScrollToId', function($location) {

  var directive = {
    link: function($scope, $element, $attrs) {
      if ($location.hash() === $attrs.id) {
        $element[0].scrollIntoView();
      }
    }
  };

  return directive;

})

      

        
        
        
      

    

My directive demo is here.

There must be more to this problem than it seems.

Update

Upon further investigation, the problem may be related to ui-router

and by default autoscroll

. I have not been able to get over this related question.