Bootstrap data-spy="affix" not working on Angular View change

Question

I'm trying to figure out why my affix-ed panel isn't staying put when I change my Angular view.

I've added the affix property directly to the panel on the first page (details), and left it in the data-spy only in the second page (flights).

In a full blown web version, if I refresh the flights page, suddenly the affix kicks in, and stays put when I scroll, but doesn't if I just navigate to the page using Angular.

It looks like the affix isn't being added to the class by Bootstrap when I navigate between views.

HTML:

<div class="panel panel-primary mySidebar" id="sidebar" 
    data-spy="affix" data-offset-top="0" data-offset-bottom="200">

CSS:

.mySidebar.affix {
    position: fixed;
    top: 250px;  
}

.mySidebar.affix-bottom {
    position: absolute;
    top: auto;
    bottom: 450px;  
}

Here's a Plunker..

http://plnkr.co/edit/S0Bc50?p=preview

I found a similair question here:

Twitter Bootstrap: Affix not triggering in single page application

But I couldn't figure out how to apply that to my problem here...

Any help would be great!

Answer 1

Angular UI Utils (not Angular UI Bootstrap, as mentioned in the comments) has a Scrollfix directive that can be used in place of Affix. I had the same problem as you with Affix not working after changing views. I tried adding Angular UI Scrollfix to my app and so far it looks like it will meet my needs.

Here is a helpful Stack Overflow post I found with more explanation and examples: Angular ui-utils scrollfix.