AngularJS : ng-model binding in ng-repeat

Question

I'm looping through a series of data and want to dynamically bind a model. My problem is that when looping through elements, it seems as if Angular creates a new scope for each iteration, so the models are not the same in the three iterations.

I've made a simplified example of my code that does not work;

http://jsfiddle.net/Fizk/uurL65e5/

<div ng-app="">
    <p ng-repeat="key in [1,2,3]">
        <input type="text" ng-model="contact.name" />
        {{contact}}
    </p>
</div>

As opposed to the non-dynamic way that works:

http://jsfiddle.net/Fizk/d0smns1v/

<div ng-app="">
<p>
    <input type="text" ng-model="contact.name" />
    {{contact}}
</p>
    <p>
    <input type="text" ng-model="contact.name" />
    {{contact}}
</p>
<p>
    <input type="text" ng-model="contact.name" />
    {{contact}}
</p>
</div>

The real code is a bit more complicated, and I cannot just hardcode the number of fields, since it's dynamically fetched from an api.

I've looked through tons of questions regarding dynamic model binding and looked through the documentation, but with no luck.

Can anyone shed some light on how I can make all three fields use the same model, so they'll update nicely?

Answer 1

Angular 1.3 added a controllerAs option which should solve all your issues when dealing with child scopes and scope inheritance.

This is considered best practice today. I've created a plunker for you.

  <div ng-app="myApp" ng-controller="myCtrl as vm">
      <p ng-repeat="key in [1,2,3]">
          <input type="text" ng-model="vm.contact.name" />
          {{contact}}
      </p>
  </div>

  <script>
    angular.module("myApp", []).controller("myCtrl", function() {
        var vm = this;

        // use vm.value instead of $scope.value
    });

  </script>

I highly recommend reading this article: Understanding Scopes .

And to understand the new controllerAs syntax you should check out: Exploring Angular 1.3: Binding to Directive Controllers .

Answer 2

If you assign contact to be an object in the parent scope before creating the child scope (I'm using ng-init to do this but it would make more sense in a controller), it will work as the child scopes will inherit the reference to the same object.

http://jsfiddle.net/uurL65e5/1/

<div ng-app="" ng-init="contact = {}">
    <p ng-repeat="key in [1,2,3]">
        <input type="text" ng-model="contact.name" />
        {{contact}}
    </p>
</div>

Answer 3

you need to define your model before, usually you define your model in your controller but for instance this works :

<div ng-app="">
    <input type="text" ng-model="contact.name" />
    <p ng-repeat="key in [1,2,3]">
        <input type="text" ng-model="contact.name" />
        {{contact}}
    </p>
</div>

Answer 4

Just use $parent

<div ng-app="">
    <p ng-repeat="key in [1,2,3]">
        <input type="text" ng-model="$parent.contact.name" />
        {{contact}}
    </p>
</div>

---

Fiddle - http://jsfiddle.net/ujmd0pc9/