Angular directive not working after route change
<p>Being fairly new to Angular I am currently building an app using angular and <a href="https://material.angularjs.org" rel="nofollow">Angular Material</a> trying to write my first directive I ran into some trouble.</p>

<p>What I want to do: Have a card on the page with a toolbar at the top of it. Once the toolbar gets scrolled to the top of the screen it will "stick" there. To accomplish this behaviour I wrote a simple directive.</p>

<pre><code>app.directive("sticky", function() {

return {
  restrict: 'A',
  link: function(scope, element, attrs) {

      //"content" is the container in which my app scrolls.
      var content = document.getElementById('content');
      angular.element(content).bind("scroll", function() {

        var cardOffset = element[0].parentElement.offsetTop;
        var scrolled = content.scrollTop;
        var cardHeight = element[0].parentElement.clientHeight;
        var bottomOffset = cardOffset + cardHeight;

        //Check if we are currently scrolling through this element.
        if (scrolled &gt;= cardOffset &amp;&amp; scrolled &lt;= bottomOffset) {
          element[0].style.top = (scrolled - cardOffset) + 'px';
          scope.shadow = true;
        } else {
          scope.shadow = false;
        }
        if (scrolled &lt;= cardOffset) {
          element[0].style.top = '0px';
        }

      });
  }
}

});
</code></pre>

<p>Here is a <a href="https://plnkr.co/edit/ERqOg43NbuNs5nSThaeM?p=preview" rel="nofollow">plunker of that in action</a>. As you may notice the plunker works just as I described above.</p>

<p>However when I put this into my application I get the following weird behaviour: when visiting a view that contains a sticky element, said element doesn't have the sticky behaviour. 
My initial guess was something wrong with the $routeProvider, but as the plunker illustrates it works with that.</p>

<p>I am really lost and searching for ideas I can look into, to fix my problem.</p>