title: Angularjs - unable to show/hide element according to scroll location
body: <p>I'm trying to show an arrow icon to be used as "go to top" button, but only after some scrolling done by the user. The code used to work great using <code>jquery</code>, but I'm having hard time to achieve the same effect using <code>angular</code>. At the moment, the arrow is always seen in the bottom right corner of the screen.</p>
  
  <p>JSfiddle <a href="http://jsfiddle.net/8hn5cws7/" rel="nofollow">here</a>.</p>
  
  <p>JS:</p>
  
  <pre><code>var myApp = angular.module('app',[]);
  
  myApp.controller('ctrl', ['$scope', function($scope) {
       //detect scroll
      $(window).scroll(function (event) {
      var scroll = $(window).scrollTop();
          console.log(scroll);
          if(scroll&gt;500 || scroll==undefined){
              $scope.showUpArrow = false;
          }else{
              $scope.showUpArrow = true;
          }
      });
  }]);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-app="app"&gt;
    &lt;div ng-controller="ctrl"&gt;
      &lt;div ng-hide="showUpArrow" id="goUp-cont"&gt;
        &lt;a href="#top"&gt;&lt;i class="fa fa-arrow-up fa-4x" id="goUp"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>