Angularjs : Scroll to bottom of div
<p>I'm having trouble scrolling to last message. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app=angular.module('myApp', ['ngMaterial'] );
app.controller('ChatCtrl', function($window, $anchorScroll){
  var self = this;
  self.messageWindowHeight = parseInt($window.innerHeight - 170) + 'px';
  self.messages = [];
  for(var i = 1 ; i&lt;=200;i ++){
    self.messages.push(i);
  }
  
  self.user = { text : ""};
  self.send = function(){
    self.messages.push(angular.copy(self.user.text));
    self.user.text = "";
  }
});

app.directive('scrollToBottom', function($timeout, $window) {
    return {
        scope: {
            scrollToBottom: "="
        },
        restrict: 'A',
        link: function(scope, element, attr) {
            scope.$watchCollection('scrollToBottom', function(newVal) {
                if (newVal) {
                    $timeout(function() {
                        element[0].scrollTop =  element[0].scrollHeight;
                    }, 0);
                }

            });
        }
    };
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Styles go here */
.chat-box {
    padding: 8px;
    border-radius: 8px;
}
.message-box {
    border-top: 1px solid #E0E0E0;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: white;
}

.message {
    overflow: scroll;
    margin: 4px;
    border: 1px solid #E0E0E0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    height: 110px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.css"&gt;
  &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic"&gt;
&lt;/head&gt;

&lt;body ng-app='myApp' layout="column" layout-fill ng-controller="ChatCtrl as ctrl"&gt;
  &lt;!-- content starts here --&gt;
  &lt;md-toolbar class="md-whiteframe-z2"&gt;
    &lt;div class="md-toolbar-tools"&gt;
      &lt;h2&gt;
          hello
        &lt;/h2&gt;
    &lt;/div&gt;
  &lt;/md-toolbar&gt;
  &lt;md-content layout="column" style="background-color: #F5F5F5;"
              ng-style="{'height':ctrl.messageWindowHeight}"&gt;
      &lt;div class="chat-box"&gt;
        &lt;ol class="discussion" scroll-to-bottom="ctrl.messages"&gt;
          &lt;li ng-repeat="message in ctrl.messages track by $index" id="msg-{{$index}}"&gt;
            {{message}}
          &lt;/li&gt;
        &lt;/ol&gt;
      &lt;/div&gt;
  &lt;/md-content&gt;
  &lt;form name="userForm" novalidate ng-submit="ctrl.send()" layout="row" layout-padding layout-align="center center" class="message-box"&gt;
    &lt;div class="message" flex&gt;
      &lt;md-input-container class="md-block"&gt;
        &lt;input type="text" name="text" ng-model="ctrl.user.text" /&gt;
      &lt;/md-input-container&gt;
    &lt;/div&gt;
    &lt;md-button class="md-icon-button" type="submit"&gt;
      send
    &lt;/md-button&gt;
  &lt;/form&gt;

  &lt;!-- content ends here --&gt;


  &lt;!-- Angular Material Dependencies --&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"&gt;&lt;/script&gt;

  &lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Here's a <a href="http://plnkr.co/edit/rAMvaQDFaFqlRQ6tXH2O" rel="nofollow noreferrer">plunk</a> of my code.</p>