title: Angular 2 - ngModel with dynamic object/properties
body: <p>In my TS file I am dynamically creating the properties on my <code>selectedValsObj</code> object like this:</p>
  
  <pre><code>private selectValsObj: any = {};
  
  setSelectedValsObj(sectionsArr) {
    sectionsArr.forEach(section =&gt; {
      section.questions.forEach(questionObj =&gt; {
        if (questionObj.type === 'drop-down') {
          this.selectValsObj[questionObj.questionId] = { selected: questionObj.answerDetails[0] };
        }
      })
    });
  }
  </code></pre>
  
  <p>In my HTML I want to bind the <code>[ngModel]</code> on my inputs to the properties on the <code>selectValsObj</code> object.  I have tried this but have had no luck: </p>
  
  <pre><code>&lt;div *ngFor="let question of section.questions"&gt;
      &lt;div class="drop-down-question" *ngIf="question?.type === 'drop-down'"&gt;
          &lt;select class="q-select"
                  [(ngModel)]="selectValsObj[questionId].selected" // &lt;== doesnt work either**
                  // [(ngModel)]="selectValsObj[{{ questionId }}].selected" // &lt;== doesnt work**
                  name="answerForQuestion{{ question?.questionId }}"&gt;
              &lt;option *ngFor="let answer of question?.answerDetails"
                  [ngValue]="answer"&gt;
                      {{ answer?.value }}
              &lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I set the <code>ngModel</code> in my HTML to a dynamically created property in my TS file?</p>