Example of ScrollSpy working within an Angular Application.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery@*" data-semver="1.9.1" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.5.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
    <script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="directives.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="scrollSpyPlunk" style="margin: 20px;">
    <h1>Scrollspy</h1>
    <div id="wrapper" class="row-fluid" ng-controller="scrollSpyCtrl">
      <div class="span3 " style="width: auto;">
        <ul id="navPills" class="nav nav-pills nav-stacked">
          <li class="active">
            <a href="#section1" prevent-default="" scroll-to="section1">Section 1</a>
          </li>
          <li class="">
            <a href="#section2" prevent-default="" scroll-to="section2">Section 2</a>
          </li>
          <li class="">
            <a href="#section3" prevent-default="" scroll-to="section3">Section 3
            </a>
          </li>
        </ul>
      </div>
      <div id="scroller" scroll-spy="" data-target="#navPills" data-scroll-offset="80" class="scrollspy-example span9">
        <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>
      </div>
    </div>
  </body>

</html>

'use strict';
var app = angular.module('scrollSpyPlunk', ['myDirectives', 'ui.bootstrap']);
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"
}]
});

  .scrollspy-example {
      height: 200px;
      overflow: auto;
  }

var myDirectives = angular.module('myDirectives', []);
myDirectives.directive('scrollSpy', function($timeout){
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {
            var offset = parseInt(attr.scrollOffset, 10)
            if(!offset) offset = 10;
            console.log("offset:  " + offset);
            elem.scrollspy({ "offset" : offset});
            scope.$watch(attr.scrollSpy, function(value) {
                $timeout(function() { 
                  elem.scrollspy('refresh', { "offset" : offset})
                }, 1);
            }, true);
        }
    }
});

myDirectives.directive('preventDefault', function() {
    return function(scope, element, attrs) {
        jQuery(element).click(function(event) {
            event.preventDefault();
        });
    }
});

myDirectives.directive("scrollTo", ["$window", function($window){
    return {
        restrict : "AC",
        compile : function(){

            function scrollInto(elementId) {
                if(!elementId) $window.scrollTo(0, 0);
                //check if an element can be found with id attribute
                var el = document.getElementById(elementId);
                if(el) el.scrollIntoView();
            }

            return function(scope, element, attr) {
                element.bind("click", function(event){
                    scrollInto(attr.scrollTo);
                });
            };
        }
    };
}]);