Header shrink directive impacting other pages

I’ve implemented the very cool header shrink directive from here: codepen.io/ionic/pen/hIzFp. It works perfectly fine on the one page where I want it to work. But when I link to a page without the directive, the header bar disappears if the page with the directive had the header bar hidden at the time of clicking on link. How do I destroy the directive and set the header back to the Ionic default navbar for other pages?

I ended up using $scope.$on with $destroy to clean it up.