title: How can I hide an element when the page is scrolled?
body: <p>Ok, I'm a little stumped.</p>
  
  <p>I'm trying to think the angular way coming from a jQuery background.</p>
  
  <p>The problem:
  I'd just like to hide a fixed element if the window is not scrolled. If someone scrolls down the page I would like to hide the element.</p>
  
  <p>I've tried creating a custom directive but I couldnt get it to work as the scroll events were not firing. I'm thinking a simple controller like below, but it doesnt even run.</p>
  
  <p>Controller:</p>
  
  <pre><code>.controller('MyCtrl2', function($scope,appLoading, $location, $anchorScroll, $window ) {
     angular.element($window).bind("scroll", function(e) {
         console.log('scroll')
         console.log(e.pageYOffset)
         $scope.visible = false;
     })
  })
  </code></pre>
  
  <p>VIEW</p>
  
  <pre><code>&lt;a ng-click="gotoTop()" class="scrollTop" ng-show="{{visible}}"&gt;TOP&lt;/a&gt;
  </code></pre>
  
  <p>LIVE PREVIEW
  <a href="http://www.thewinetradition.com.au/new/#/portfolio">http://www.thewinetradition.com.au/new/#/portfolio</a></p>
  
  <p>Any ideas would be greatly appreciated.</p>