Angular Fluid Textarea Directive

directive-fluid-textarea.js

// Use like: <textarea fluid-textarea rows="1"></textarea>
angular.module('q42.fluidTextarea', [])
.directive('fluidTextarea', function($timeout) {

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

          element.css({
            resize: 'none'
          });

          element.attr('rows', 1);

          function update() {

            element.height('auto');
            var scrollHeight = element.get(0).scrollHeight;
            var paddingTop = parseInt(element.css('padding-top'))
            var paddingBottom = parseInt(element.css('padding-bottom'));
            var targetHeight = scrollHeight - (paddingTop + paddingBottom);
            element.height(targetHeight);

          }

          element.on('input', update);
          update();

        }
    };

});

Bug: the update function creates a tiny textarea when it's not actually visible.