title: AngularJS - ngModel inside ngRepeat doesn't change the scope value
body: <p>I'm making a survey app. A user can select questions of the type "text", "paragraph", "checkbox", and then type their question. If this is a checkbox, then they get to add as many options as they want. </p>
  
  <p>The code below is incomplete and only shows the case for "checkbox". It's the directive's link function:</p>
  
  <pre><code>scope.questions = [];
  scope.addQuestion = function(type)
  {
      var question = {
          type : type,
          question : ''
      };
      if (type == 'checkbox') {
          question.options = [];
      }
      scope.questions.push(question);
  }
  
  scope.addOption = function($questionIndex)
  {
      var question = scope.questions[$questionIndex],
          option   = 'Option ' + (question.options.length+1);
  
      question.options.push(option);
  }
  </code></pre>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;div ng-repeat="question in questions" class="questions"&gt;
      &lt;!-- The Question --&gt;
      &lt;div class="row"&gt;
          &lt;!-- This is where the question field goes --&gt;
      &lt;/div&gt;
  
      &lt;!-- The Answer --&gt;
      &lt;div class="row"&gt;
  
          &lt;!-- Checkbox answer --&gt;
          &lt;div class="columns large-2" ng-if="question.type == 'checkbox'"&gt;Options&lt;/div&gt;
          &lt;div class="large-8 columns" ng-if="question.type == 'checkbox'"&gt;
              &lt;div class="row" ng-repeat="option in question.options"&gt;
                  &lt;div class="large-offset-1 large-9 columns"&gt;
                      &lt;input type="text" ng-model="option" /&gt;
                  &lt;/div&gt;
                  &lt;div class="large-1 columns end" ng-click="removeOption($parent.$index, $index)"&gt;
                      &lt;i class="fa fa-times"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Button for adding more options MARKUP --&gt;
              &lt;div ng-click="addOption($parent.$index)"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Add a new Question MARKUP --&gt;
  &lt;!-- This calls addQuestion(type) with type being 'text', 'paragraph', 'checkbox', etc --&gt;
  </code></pre>
  
  <p>The problem is: when I add more options, and modify the value, and then add to add another option, the values reset to the default. </p>
  
  <p>Right now, the <code>ng-model</code> inside the <code>input</code> is the variable <code>option</code> that comes from the <code>ng-repeat="option in question.options track by $index"</code>. IF I change this <code>ng-model</code> to <code>ng-model="question.options[$index]"</code> THEN everything works just fine. Why is it that <code>option</code> of <code>ng-repeat</code> is not passed by reference? Is this because <code>option</code> here is a just a text variable? If so how can I solve this?</p>
  
  <p>Here is a <a href="http://plnkr.co/edit/VVbTigJdi5m3vonky2O4?" rel="nofollow">plunker</a> for this</p>