Bootstrap scrollspy not working well with ng-show

Question

I am using Bootstrap scrollspy for a vertical menu.The menu has some titles, each title for a div in the page.

The scroll spy works fine, but the problem occur when the user expand a section to see more information. The expands and collapse are done using ng-show. When the section expands the scroll spy will not point on the correct element.

I searched for a solution but all of them didn't work, I think because they are for adding elements to the DOM dynamically, while my problem in showing and hiding elements.

Here is an image to demonstrate the problem.

The scroll menu bar code:

<div class="col-sm-2" style="padding-left: 0px; padding-right: 0px;">
<div  id="sidebar" class="bs-docs-sidebar hidden-print" role="complementary" style="padding-left: 0px;">
    <ul class="nav bs-docs-sidenav" >
        <li>
            <a href="#pc">Program Committee</a>
            <ul class="nav" >
                <li><a href="#bigdata">Big Data, Business Intelligence, Analytics</a></li>
                <li><a href="#soa">BPM, Web Services, SOA</a></li>
                <li><a href="#cloud">Cloud and Distributed Computing</a></li>
                <li><a href="#elearning">E-Learning, M-Learning</a></li>
                <li><a href="#hpc">High Performance Computing</a></li>
                <li><a href="#interoperability">Interoperability and Future Internet Technologies</a></li>
                <li><a href="#ir">IR, Data and Knowledge Management</a></li>
                <li><a href="#multimedia">Multimedia, Computer Vision and Image Processing</a></li>
                <li><a href="#networking">Networking, Sensor Networks, Mobile Computing</a></li>
                <li><a href="#nlp">Natural Language Processing</a></li>
                <li><a href="#security">Security, Privacy</a></li>
                <li><a href="#social-computing">Social Computing </a></li>
            </ul>
        </li>
    </ul>
</div>

Sections Code the have ng-click and ng-show:

<div id="bigdata" class="bs-callout bs-callout-warning" ng-click="show_bigdata=(show_bigdata+1)%2">
    <h3>Big Data, Business Intelligence, Analytics</h3>
</div>
<div id="show_bigdata"  ng-show="show_bigdata">
    <h4 class="page-header">Track Chairs</h4>
    <ul>
        <li><i class="icon-chevron-sign-right"> </i>Ahmed Mike, New Mexico Tech, USA 
        </li>
        <li><i class="icon-chevron-sign-right"> </i>Mohamed Mokbel, University of Minnesota, USA 
        </li>
    </ul>
    <h4 class="page-header">PC Members</h4>
    <ul>

        <li><i class="icon-circle-arrow-right"> </i>Ahmed Lbath, University Joseph Fourier of Grenoble, France</li>
        <li><i class="icon-circle-arrow-right"> </i>Amr Awadallah, Cloudera, USA</li>

    </ul>
</div>

Answer 1

You may try to manually trigger the scroll event on the window once the expanding of a section is done.

I once ran into a simmilar problem and worked around the issue by forcing scrollspy to update after the DOM has changed. Updating scrollspy is rather easy as it hooks in on the scroll event of the window, which you can manually trigger after you are done manipulating the DOM.

whendone {
    $( document ).trigger( 'scroll' );
}