Bootstrap Scrollpy not working after adding AngularJS

Question

I added AngularJS to my existing web application and the Scrollpy stopped working. The following is the code after including AngularJS controllers.

<div class="container bs-docs-container">
    <div class="row">

        <div class="col-md-3" ng-controller="MenuController">  

            <div class="bs-sidebar hidden-print affix-top" role="complementary">
                <ul class="nav bs-sidenav quickMenu">
                <h3 class="quickMenuHead">Quick Menu</h3>
                <hr></hr>                          
                    <li ng-repeat="item in menu" class="">
                        <a href="#{{item.mainType}}">{{item.mainName}}</a>
                        <ul class="nav">
                            <li ng-repeat="sub in item.submenu" class="">
                                <a href="#{{item.mainType}}-{{sub.subType}}">{{sub.subName}}</a>
                            </li>
                        </ul>
                    </li> 
                </ul>                   

            </div>
        </div>

And the Scrollpy was enabled via JS:

$body.scrollspy({
  target: '.bs-sidebar',
  offset: 40
})

$window.on('load', function () {
  $body.scrollspy('refresh')
})

Any comments why this is failing?

Answer 1

You just try this.

app.directive('scrollSpy', function (){
   return {
     restrict: 'A',
     link: function(scope, elem, attr) {
         elem.scrollSpy({ /* set up options here */ });

         //watch whatever expression was passed to the
         //scroll-spy attribute, and refresh scroll spy when it changes.
         scope.$watch(attr.scrollSpy, function(value) {
              elem.scrollSpy('refresh');
         });
     }
   };
});

Then in HTML:

<div scroll-spy="foo">Do something with: {{foo}}</div>