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

You can create a directive for this:

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

http://plnkr.co/edit/H6tFjw1590jHT28Uihcx?p=preview

BTW: avoid DOM manipulation inside controllers (use directives instead).