Changing text model value doesn't reflect in the scope array

Question

I'm new to angular and I have input fields populated with data. But on data change on input field it is not getting reflected in the array present in the scope.

JS

var app = angular.module('plunker',[]);
app.controller('Nav', function($scope) {
      $scope.urls = [
          "http://google.com",
          "http://cnn.com"  
     ]; 
});

HTML

<body ng-controller="Nav">
    {{urls}}
    <div ng-repeat="url in urls">
        <input type="text" ng-model="url" />
    </div> 
</body>

Demo : http://plnkr.co/edit/OXXdFK2JElVaAh0uYmxG?p=preview

possible duplicate of [Difficulty with ng-model, ng-repeat, and inputs](http://stackoverflow.com/questions/13714884/difficulty-with-ng-model-ng-repeat-and-inputs) — Stewie, Dec 29 '13 at 09:41

score 2 · Accepted Answer · answered Dec 29 '13 at 09:38

The values in the scope do not change because you are not binding to an object. If you change the initial array like this:

$scope.urls = [
    { url: "http://google.com" },
    { url: "http://cnn.com" }  
];

and update the ng-repeat to item in urls and ng-model to item.url, everything should work as expected.

In your example, the url reffered to a string and angular was unable to properly resolve the binding.

Please see my updated demo: http://plnkr.co/edit/plrJQHZdZ9sa45ypO29N?p=preview

Changing text model value doesn't reflect in the scope array

1 Answers1