横方向に自動リサイズするinputのdirectiveをつくりたい

はじめまして。タイトルのとおりです。AngularJSをつかって横方向に自動リサイズするinputのdirectiveをつくっています。inputにテキストが入力され自動でinputが横方向にリサイズされる処理がわかりません。 また合わせて、inputの初期値のテキスト量に応じてページロード時にinputを自動でリサイズさせておきたいです(500pxをmax-widthにしたいです)。

高さが自動でリサイズされるものは下記が実現できたのですがwidthに置き換えてもうまく動作せずに困っています。よろしくお願いします。

===

resizeInput.coffee

mod = angular.module('resizeInput', [])
mod.directive 'resizeInput', ->
  {
    restrict: 'A'
    require: '?ngModel'
    link: (scope, element, attrs, ngModel) ->
      HEIGHT = 25
      el = angular.element(element[0])
      el.css 'lineHeight', HEIGHT + 'px'
      el.css 'height', HEIGHT + 'px'

      resize = (e) ->
        textHeight = e.target.scrollHeight
        height = ~ ~(textHeight / HEIGHT) * HEIGHT
        el.css 'height', height + 'px'
        return

      el.on 'input', resize
      scope.$watch attrs.ngModel, (value) ->
        if value == undefined
          return
        textHeight = el[0].scrollHeight
        height = ~ ~(textHeight / HEIGHT) * HEIGHT
        el.css 'height', height + 'px'
        return
      ngModel.$parsers.unshift (viewValue) ->
        viewValue
      return

  }

===

edit.html

<input type="text" resize-input ng-model="item.text">