Angular Material Layout

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<body ng-app="MyApp" layout="row" ng-cloak>

 <md-sidenav layout="column" md-is-locked-open='true'>
   SideNav
   </md-sidenav>
  
  <md-content flex layout="column" scroll>
    <ng-view>
      <div class="test">Content</div>
    </ng-view>
  </md-content>
</body>

CSS

md-sidenav  {
  width: 110px;height:100%;
  padding:20px;
  background-color: #6bc7cc;
}

md-content {
  background-color : tan;
  height:100%;
  padding:20px;
}

.test {
  height: 1500px;
}

JavaScript

var app = angular.module('MyApp', ['ngMaterial']);
 
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {

        angular.element($window).on("scroll", function() {
            if (this.pageYOffset >= 100) {
                 console.log('Scrolled below 100px');
             } else {
                 console.log('Scrolled above 100px');
             }
        });
    };
});