Angular Text Area Split

http://angularjs.org/

HTML

<div ng-app="myApp" scroll id="page" ng-class="{min:boolChangeClass}">

    
    
    <div id="newarea">
      <textarea width="200px" class="scrolls"  style="height:130px;overflow-y:scroll "></textarea>
    </div>
    </div>
    
</div>

JavaScript

app = angular.module('myApp', []);


app.directive("scrolls", function ($window) {
    return {
    	restrict : 'C',
    	link : function(scope, element, attrs) {
       
      console.log(element);
        angular.element(element).bind("scroll", function() {
        console.log(this.scrollTop);
        var newarea = angular.element(document.getElementById('newarea'));
             if(this.scrollTop > 0 )
             {
             	
             	var appendTextbox= '<textarea width="200px" class="scrolls"  style="height:130px;overflow-y:scroll "></textarea>';
             	 newarea.append(appendTextbox);
               var childrens = newarea.children();
             	 var  textList = angular.element(document.getElementsByClassName('scrolls'));
               
               var tofocus = textList[textList.length-1];
               console.dir(textList.length);
               angular.element(tofocus).attr('autofocus','true');
              
             }
        });
        }
    };
});