title: How to test dynamically named inputs inside ng-repeat using $setViewValue()
body: <p>I am trying to test a directive that dynamically adds form inputs to a page using ng-repeat. The code runs fine in the browser but trying to test it with Jasmine I discovered what seems (to me) to be a bug or at least weird behaviour in Angular. </p>
  
  <p>I'd expect to be able to set the view value on an input using</p>
  
  <pre><code>form.questions.answer1.$setViewValue();
  </code></pre>
  
  <p>but in my tests when I console log the form.questions object I get this:</p>
  
  <pre><code>form.questions.answer{{ question.questionId }} 
  </code></pre>
  
  <p>i.e. The index of the object hasn't been parsed (although the html is output correctly).</p>
  
  <p>Is there any other way of triggering the ng-change event? I have tried setting the value of the input using jQuery (inside my test) but although it successfully changes the value it doesn't fire off the ng-change event.</p>
  
  <p><strong><a href="http://plnkr.co/edit/8sDzrU?p=preview" rel="nofollow">plunker</a></strong> (check the contents of your console to see what I mean.).</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;!-- language: lang-js --&gt;
  app.directive('repeatedInputs', function(){
    var template ='&lt;div  ng-form name="questions"&gt;'+
    '&lt;div ng-repeat="(key, question) in questions" &gt;' +                                                   
      '&lt;span id="question{{ question.questionId }}"&gt;{{ question.questionText }}&lt;/span&gt;'+
      '&lt;span&gt;&lt;input type="text" name="answer{{ question.questionId }}"' +
       ' id="answer{{question.questionId}}"' +                                                                  
      '  ng-model="question.answer" ng-change="change()"/&gt;&lt;/span&gt;' +
    '&lt;/div&gt;' +
    '&lt;/div&gt;';
  
    return {                                                                                                                             
        template: template,
        scope: {
          answers: '=',
          singleAnswer: '='
        },
  
        /**                                                                                                                                
         * Links the directive to the view.                                                                                                
         *                                                                                                                                 
         * @param {object} scope                                                                                                           
         * Reference to the directive scope.                                                                                               
         *                                                                                                                                 
         * @param {object} elm                                                                                                             
         * Reference to the directive element.                                                                                             
         */                                                                                                                                
        link: function (scope, element) {                                                                                                  
  
          scope.questions = [
            {
              questionId: '1',
              questionText: 'What is your name?',
              answer: null
            },
            { 
              questionId: '2',
              questionText: 'What is your quest?',
              answer: null
            },
            { 
              questionId: '3',
              questionText: 'What is your favourite colour?',
              answer: null
            }
          ];
  
          scope.change = function () {
            for (var i in scope.questions) {
              scope.answers[i] = scope.questions[i].answer;
            }
          };
        }
     };
  });
  </code></pre>
  
  <p>Here is my spec file:</p>
  
  <pre><code>&lt;!-- language: lang-js --&gt;
  describe('repeating inputs directive', function () {                           
  
    var element, scope, $compile;                                                                     
  
    beforeEach(function(){
      module('plunker');
      inject(function ($rootScope, _$compile_) {                   
  
        scope = $rootScope.$new();                                                  
        scope.theAnswers = [];
        scope.singleAnswer = null;
  
        element = angular.element(                                                  
          '&lt;form name="form"&gt;'
          +'&lt;div repeated-inputs answers="theAnswers" single-answer="singleAnswer"&gt;'
          +'&lt;/div&gt;&lt;/form&gt;'                 
        );                                                                          
        $compile = _$compile_;
        $compile(element)(scope);
        scope.$apply();
      })
    });
  
    it('should store the input from the answers in the parent scope',             
        function () {                                                             
  
      // I want to do this
      //scope.form.questions.answer1.$setViewValue('Ben');
  
      // but inside the object, the answers name field is not being parsed
      // I am expecting the path to the answer to look like this:
      // scope.form.questions.answer1
      // instead it looks like this:
      // scope.form.questions.answer{{ question.questionId }}
      console.log(scope.form.questions);
  
      expect(scope.theAnswers[0]).toEqual('Ben');
  
    }); 
  });  
  </code></pre>