Header that shrinks on page scroll

header.css

#header_nav {
    width:100%;
    background-color:#666;
    position:fixed;
    top:0;
    left:0;
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
   -o-transition:0.5s linear all;
   transition:0.5s linear all;
}

.big {
    height:100px;   
}

.small {
   height:40px;
}

header.js

function myCtrl($scope, $window) {
   $scope.navClass = 'big';
   angular.element($window).bind(
    "scroll", function() {
         console.log(window.pageYOffset);
         if(window.pageYOffset > 0) {
           $scope.navClass = 'small';
         } else {
           $scope.navClass = 'big';
         }
         $scope.$apply();
   });  
}