This is an AngularJS directive for having an automatically resizing text input that has two way data binding. Most of the credit goes to the plunkers in this questions (http://stackoverflow.com/questions/17410896/angularjs-directive-input-width-resize-by-keyup) for coming up with the starting point for the directive.

autoSizeInput.html

<span>
  <input type="text" ng-model="value">
  <span style="visibility:hidden; position:absolute; left:-1000; top:-1000;">{{value}}</span>
</span>

autoSizeInput.js

'use strict';

angular.module('autoSizeInput', []) 
  .directive('autoSizeInput', function() {
    return {
      replace: true,
      scope: {
        value: '=inputValue'
      },  
      templateUrl: 'templates/directives/autoSizeInput.html',
      link: function(scope, element, attrs) {
        var elInput = element.find('input');
        var elSpan = element.find('span');
        elSpan.html(elInput.val());

        scope.$watch('value', function(value) {
          if(value) {
            elSpan.html(elInput.val());
            elInput.css('width', (elSpan[0].offsetWidth + 10) + 'px');
          }   
        }); 
      }   
    };  
  });

exampleUsage.html

<div input-value="parameter.value" auto-size-input></div>