Angular: Empty Fiddle

http://angularjs.org/

HTML

<div ng-controller="MyCtrl">
  
    <textarea ng-show='showArea' elastic ng-model='name'></textarea>
    <a href='' ng-click="showArea = true"> Show textrea</a>
</div>

CSS

textarea {
    resize:none
}

JavaScript

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

myApp.directive('elastic', [
    '$timeout',
    function($timeout) {
        return {
            restrict: 'A',
            link: function($scope, element) {
                $scope.initialHeight = $scope.initialHeight || element[0].style.height;
                var resize = function() {
                    element[0].style.height = $scope.initialHeight;
                    element[0].style.height = "" + element[0].scrollHeight + "px";
                };
                element.on("input change", resize);
                $timeout(resize, 0);
            }
        };
    }
]);
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.showArea = false
    $scope.name = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet ultrices odio, quis varius nisl malesuada at. Quisque eget pulvinar lacus, non volutpat neque. Praesent at neque sapien. Aenean in justo ac ex cursus cursus. Nulla interdum sed mi ut tincidunt. Nam et imperdiet massa. Maecenas iaculis erat magna, sed vulputate tellus gravida vitae. Quisque sed tellus congue felis ultricies fermentum in id orci';
}