Headroom is not working in Angular

[muhammadyou]

I have added headroom and angular.headroom files, then i have injected headroom in my app. Next, i wrapped my nav bar in headroom tag and added following css. However, i couldn't find it working

.headroom {
transition: transform 200ms linear;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
}

[tabish89]

@WickyNilliams I am having trouble implementing this really cool plug-in in an angular setting/environment. I have done the following so far and cannot for the life of me figure out what is wrong with my implementation:

1. Added headroom.js
2. Added angular.headroom.js
3. Added reference to index.html

  <script src="/js/libraries/angular.headroom.js"></script>
  <script src="/js/libraries/headroom.js"></script>

4. Added requirement to angularJS module

angular.module('PSApp', [
  'fcsa-number',
  'headroom',
  'typer',...
])

5. Added some basic CSS

.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}

.headroom--pinned {
    transform: translateY(0%);
}

.headroom--unpinned {
    transform: translateY(-100%);
}

What am I doing wrong? It just doesn't want to work... activate. I scroll up/down and nothing happens...

[WickyNilliams]

Closing in favour of #333, which will look at all angular issues