How to scroll the bottom of a div using angular js

Question

I have a div in which I added an element. I want to scroll to the bottom of the div whenever an element is added to the div. I know how to do this in jquery. But I did not know how to scroll using angular js. I know using jquery. Scroll to the end of the div?

testCaseContainer is the div identifier.

var elem = document.getElementById('testCaseContainer'); // just to
                                                                    // scroll down
                                                                    // the line
        elem.scrollTop = elem.scrollHeight;

I want to know how this is possible using angular?

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

I added css to the div container so that it scrolls.

.heightClass{
  height:100px;
  overflow :auto;
}

how to move focus below when an item is added. write your answer ..

Answer 1

, , , :

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

HTML

<div class="heightClass" scroll="studentDetail">

: $timeout , .

Demo Plunker