Scroll to bottom in chat box in angularjs

Question

I am trying to automatically scroll to bottom whenever there is a new message.

My code moves the scrollbar but it does not take it to exact bottom. Kindly help. Her

Answer 1

Thanks @MajoB

Here are my 2 cents including:

• removed jQuery dependency
• added a $timeout to make sure $digest cycle is finished

ngScrollBottom.js:

angular.module('myApp').directive('ngScrollBottom', ['$timeout', function ($timeout) {
  return {
    scope: {
      ngScrollBottom: "="
    },
    link: function ($scope, $element) {
      $scope.$watchCollection('ngScrollBottom', function (newValue) {
        if (newValue) {
          $timeout(function(){
            $element.scrollTop($element[0].scrollHeight);
          }, 0);
        }
      });
    }
  }
}]);