Double Binding is not working with Angularjs

Question

<div ng-controller="TestController">
    <div class="col-md-6 col-md-offset-2">
        <table class="table table-bordered">
            <tr ng-repeat="column in columns track by $index" >
                <td>{{ column }}</td>

                <td><input type="text"  ng-model="size[$index]" class="form-control"/></td>
            </tr>
        </table>
    </div>
    <div ng-repeat="column in columns track by $index">
        -> <span ng-bind="size[$index]"></span> <br/>
    </div>
</div>

Javascript:

var app = angular.module('app',[]);
app.controller('TestController',function($scope, $http){
     $scope.columns = ['nome1','nome2','nome3'];
});       

I would like to bind the information while I typed in the text input (always referencing the field I typed to span which will show the information), but did not notice the way I did.

Answer 1

You need to initialize the variable size in his controller since it will only manipulate items within it:

$scope.size = [];

var app = angular.module('app', []);
app.controller('TestController', function($scope, $http) {
  $scope.columns = ['nome1', 'nome2', 'nome3'];
  $scope.size = [];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app">
  <div ng-controller="TestController">
    <div class="col-md-6 col-md-offset-2">
      <table class="table table-bordered">
        <tr ng-repeat="column in columns track by $index">
          <td>{{ column }}</td>

          <td>
            <input type="text" ng-model="size[$index]" class="form-control" />
          </td>
        </tr>
      </table>
    </div>
    <div ng-repeat="column in columns track by $index">
      -> <span ng-bind="size[$index]"></span> 
      <br/>
    </div>
  </div>
</div>