title: Scroll to bottom in chat box in angularjs
body: <p>I am trying to automatically scroll to bottom whenever there is a new message. </p>
  
  <p>My code moves the scrollbar but it does not take it to exact bottom. Kindly help. Here is my plunker.</p>
  
  <p><a href="http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9">http://plnkr.co/edit/NSwZFtmBYZuW7e2iAUq9</a></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="style.css" /&gt;
  &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div ng-app="Sojharo"&gt;
    &lt;div ng-controller="MyController"&gt;
      &lt;div id="chatBox"&gt;
        &lt;div ng-repeat="message in messages"&gt;
          &lt;div class="chatMessage"&gt;
            &lt;div class="messageTextInMessage"&gt;{{message.msg}}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="chatControls"&gt;
  
        &lt;form ng-submit="sendIM(im)"&gt;
          &lt;input type="text" ng-model="im.msg" placeholder="Send a message" class="chatTextField" /&gt;
        &lt;/form&gt;
        Type and press Enter
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is javascript:</p>
  
  <pre><code>angular.module('Sojharo', [])
  
  .controller('MyController', function($scope) {
  
    $scope.messages = [];
    $scope.im = {};
  
    $scope.sendIM = function(msg) {
  
  
      $scope.messages.push(msg);
      $scope.im = {};
  
      var chatBox = document.getElementById('chatBox');
      chatBox.scrollTop = 300 + 8 + ($scope.messages.length * 240);
  
  
    }
  });
  </code></pre>
  
  <p>Kindly let me know of angular way for this too. Following way, I found on Internet, does not work:</p>
  
  <p>Here are these directives</p>
  
  <pre><code>.directive("myStream", function(){
     return {        
        restrict: 'A',
        scope:{config:'='},
        link: function(scope, element, attributes){
         //Element is whatever element this "directive" is on
         getUserMedia( {video:true}, function (stream) {
             console.log(stream)
           element.src = URL.createObjectURL(stream);
           //scope.config = {localvideo: element.src};
           //scope.$apply(); //sometimes this can be unsafe.
         }, function(error){ console.log(error) });
        }
     }
  
  })
  
  .directive('ngFocus', [function() {
        var FOCUS_CLASS = "ng-focused";
        return {
          restrict: 'A',
          require: 'ngModel',
          link: function(scope, element, attrs, ctrl) {
            ctrl.$focused = false;
            element.bind('focus', function(evt) {
              element.addClass(FOCUS_CLASS);
              scope.$apply(function() {ctrl.$focused = true;});
            }).bind('blur', function(evt) {
              element.removeClass(FOCUS_CLASS);
              scope.$apply(function() {ctrl.$focused = false;});
            });
          }
        }
      }]);
  </code></pre>