I have a simple ng-repeat list, in which i am assigning current list item value to another property on the controller as follows:

  <li ng-repeat="num in list">
    <input type="text" ng-init="value = num" ng-model="value" />
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button>
  </li>

But when i click the Save button i get default value set for $scope.value. I expect the value for the particular input text to be displayed.

Here is the controller:

 angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = false;
      $scope.list = [0, 1, 2, 3, 4];
      
      $scope.save = function() {
         alert($scope.value);
      }
    });

How can i access the updated value of a input item in my controller on save function call.

Here is the plunker for the same: plnkr

Update: I am expecting the value to be fetched to controller without passing it as a parameter.

I have a simple ng-repeat list, in which i am assigning current list item value to another property on the controller as follows:

  <li ng-repeat="num in list">
    <input type="text" ng-init="value = num" ng-model="value" />
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button>
  </li>

But when i click the Save button i get default value set for $scope.value. I expect the value for the particular input text to be displayed.

Here is the controller:

 angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = false;
      $scope.list = [0, 1, 2, 3, 4];
      
      $scope.save = function() {
         alert($scope.value);
      }
    });

How can i access the updated value of a input item in my controller on save function call.

Here is the plunker for the same: plnkr

Update: I am expecting the value to be fetched to controller without passing it as a parameter.

• javascript
• angularjs
• angularjs-ng-repeat
• angular-ngmodel
• 2-way-object-databinding

• 3 ngRepeat creates its own scope. – Satpal Commented Mar 25, 2015 at 16:44
• Okay, so how to retrieve the value. – jsbisht Commented Mar 25, 2015 at 16:45
• You can pass value to save function, like ng-click="save(value)" accept the parameter and then perform your operation – Satpal Commented Mar 25, 2015 at 16:46
• 1 I can do that, but that defies the two way binding purpose. – jsbisht Commented Mar 25, 2015 at 16:47
• 1 your plunkeris not updated – A.B Commented Mar 25, 2015 at 16:50

4 Answers 4

Wow I can't believe most people have missed this. If you are using Angular 1.2 then you should definitely check out track by keyword in your ngRepeat directive.

<li ng-repeat="num in list track by $index">
    <input type="text" ng-model="list[$index]" />
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button>
</li>

Bottom line is stay away from primitive types when binding since it will give you sync issues.

Fellas please put more time and effort into researching your solutions instead of just posting for points.

Hope this helps!

ngRepeat create a scope, so, object is passed by reference and number by value. Your code is problematic, if you successfully update the value, it will update all the numbers in ng-repeat. You can do this:

html

    {{value.val}} <!-- for check the value -->
<li ng-repeat="num in list">
    <input type="text" ng-model="num" />
    <button type="button" class="btn btn-primary" ng-click="value.val=num">Save</button>
  </li>

javascript

angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = {val:false};
      $scope.list = [0,1,2,3,4];
});

http://jsfiddle.net/oq6zdeLd/

I'm sorry about my english...

here it is how you can do that

<li ng-repeat="num in list">
    <input type="text" ng-init="value = num" ng-model="value" />
    <button type="button" class="btn btn-primary" ng-click="save(value)">Save</button>
  </li>


angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = false;
      $scope.list = [0, 1, 2, 3, 4];

      $scope.save = function(argument) {
         $scope.value = argument;
         alert($scope.value);
      }
    });

Lets not abuse the expression "2 way binding" ;)

Your controller has one scope and there is just one $scope.value in that scope. You cannot force is to have multiple values simultaneously.

ng-repeat creates new scope for each li. And even if you try to use $parent.value, your controller's $scope.value will only have the last assigned value in ng-init

You best bet in this case to pass the value as an argument. Hope this helped to explain the issue a little more. Correct me if I am wrong.