Angular input limited to 1 char

Question

Angular input limited to 1 char

I'd like to know why I can't input more than one character per input in this example:

<div ng-app>
  <div ng-controller="ctrl">
     <table>
            <tr>
                <td ng-repeat="f in foo">
                    <input ng-model="foo[$index]" style="width:60px" ></input>
                </td>
            </tr>
        </table>
  </div>
</div>

js:

function ctrl($scope) {
  $scope.foo = [];
    for (var i=0; i<5; i++) {
        $scope.foo.push('');
    }  
}

angularjs

Answer 1

You are binding your model to a primitive. It can't work that way. Complete explanation in this github issue. Also, your ng-repeat refreshes each time you change the input value. That's why you are loosing focus.

Always bind to objects:

HTML:

<td ng-repeat="f in foo">
  <input ng-model="f.value" style="width:60px" />
</td>

Controller:

function ctrl($scope) {
  $scope.foo = [];
    for (var i=0; i<5; i++) {
        $scope.foo.push({value: ''});
    }
}

Answer 2

If you don't mind using HTML5 you can use the autofocus attribute. Just add it to the input field.

<li ng-repeat="i in items">{{i.name}} <input ng-model="i.description" autofocus></li>

Here's a fork of your jsFiddle.