title: Changing css on scrolling Angular Style
body: <p>I want to change CSS elements while a user scrolls the angular way.</p>
  <p>here's the code working the JQuery way</p>
  <pre><code>$(window).scroll(function() {
      if ($(window).scrollTop() &gt; 20 &amp;&amp; $(window).scrollTop() &lt; 600) {
          $('header, h1, a, div, span, ul, li, nav').css('height','-=10px');
      } else if ($(window).scrollTop() &lt; 80) {
          $('header, h1, a, div, span, ul, li, nav').css('height','100px');
      }
  </code></pre>
  <p>I tried doing the Angular way with the following code, but the $scope.scroll seemed to be unable to properly pickup the scroll data.</p>
  <pre><code>forestboneApp.controller('MainCtrl', function($scope, $document) {
      $scope.scroll = $($document).scroll();
      $scope.$watch('scroll', function (newValue) {
          console.log(newValue);
      });
  });
  </code></pre>