Angular bootstrap scrollspy doesn't work with dynamic image content

Question

I followed this answer and fork an example:

How to implement a scrollspy in angular.js the right way?

My purpose is to populate dynamic content using template and there are images in there:

http://plnkr.co/edit/OKrzSr

**HTML code difference:((

    <div ng-repeat="item in items">
      <h4 id="{{ item.id }}">{{ item.id }}</h4>
      <p ng-repeat="img in [1,2,3,4,5]"><img ng-src="{{ item.src }}"></p>
    </div>

Javascript code difference:

angular.module('scrollSpyPlunk')
  .controller('scrollSpyCtrl', function ($scope, $anchorScroll)
{
$scope.items = [{
  "id": "section1",
  "src": "http://placehold.it/400x400"
},{
  "id": "section2",
  "src": "http://placehold.it/400x400"
},{
  "id": "section3",
  "src": "http://placehold.it/400x400"
}]
});

It seems that the scrollspy feature doesn't work as expected. It activated the menu way too early when I scroll down. I think it treated images as just one line of text. I am not sure.

Any help to fix this?

Answer 1

I wrote my own Scrollspy directive here https://github.com/quanghoc/angular-bootstrap-scrollspy

The key is to add this event

$rootScope.$on('scrollspy.refresh', function() {
  refresh(attrs);
});