Why models in nested scopes won't be updated when changing the value?

Question

Why models in nested scopes won't be updated when changing the value?

AngularJs source:

<html ng-app>
  <body ng-controller="Controller">
    <div ng-init="numbers=[11,22,33]">
       <div ng-repeat="n in numbers">
         <input type="text" ng-model="n"/> [{{n}}]
       </div>
    </div>
    <script>
        function Controller($scope) {}
    </script>
  </body>
</html>

When I change the value of the inputs, the text on the right won't be updated. Where is wrong?

The live demo is here: http://jsfiddle.net/Freewind/TZwxy/

You can change the value in the inputs and see.

binding
nested
angularjs

Answer 1

Try with an array of objects instead:

function Controller($scope) {
  $scope.numbers = [{value: 11 }, {value: 22 }, {value: 33 }];
}

<html ng-app>
  <body ng-controller="Controller">
    <div>
       <div ng-repeat="n in numbers">
         <input type="text" ng-model="n.value"/> [{{n.value}}]
       </div>
    </div>
  </body>

</html>

See jsFiddle.