横方向に自動リサイズするinputのdirectiveの続き

はじめまして。タイトルの通りです。AngularJSをつかって横方向に自動リサイズするinputのdirectiveをつくっています。以前こちらで質問させて頂いたときに教えて頂いたコードを参考に以下のように実装しているのですが、何点か思うようにいかないとろこがあり、再び相談させて頂いております。テキストを入力すると入力に応じてinputタグのwidthを変更していくものを想定しています。

困っているところとしましては、
・ページ読み込み時に自動でリサイズされない（minWidthの値が適応され端が切れてしまう）
・文字の幅をcharWidthで指定しているので、日本語と英語、さらには「a」と「i」でも文字の幅が異なるので若干幅がずれる

ということが起こっています。初歩的なところで詰まっているのはわかっているのですが自力では解決できなさそうだったので質問させていただきました。読みにくいコードかもしれませんがどうかよろしくお願いいたします。

angular.module('myInput', []).directive 'myInput', ->
  {
    restrict: 'A'
    require: '?ngModel'
    link: (scope, elem, attrs, ngModel) ->

      calculateWidth = (length) ->
        minWidth = 30
        maxWidth = 730
        charWidth = 12
        width = length * charWidth
        if width > maxWidth then maxWidth else if width < minWidth then minWidth else width

      resize = (e) ->
        elem.css 'width', calculateWidth(newVal.length)
        elem.css 'height', '30px'
        return

      elem.on 'keypress', (e) ->
        if e.keyCode == 13
          elem.blur()
          return

      scope.$watch (->
        ngModel.$modelValue
      ), (newVal, oldVal) ->
        if angular.isDefined(newVal)
          elem.css 'width', calculateWidth(newVal.length)
          elem.css 'height', '30px'
        return
      return
  }