title: Dynamic ng-model name in AngularJS form
body: <p>I have an AngularJS form where I'm using ng-repeat to build the fields of the form dynamically based on another selection. I'm trying to generate the model name dynamically and am running into problems.</p>
  
  <pre><code>&lt;div class="form-group" ng-repeat="parameter in apiParameters"&gt;
    &lt;label for="{{parameter.paramName}}" class="col-sm-2 control-label"&gt;{{parameter.paramTitle}}&lt;/label&gt;
    &lt;div class="col-sm-3"&gt;
      &lt;input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters.{{parameter.paramName}}" placeholder="{{parameter.paramTitle}}"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I need is it to eval to something like ng-model="formData.parameters.fooId" or ng-model="formData.parameters.barId"</p>
  
  <p>The above results in an error:
  Error: [$parse:syntax] Syntax Error: Token '{' is an unexpected token at column 21 of the expression [formData.parameters.{{parameter.paramName}}] starting at [{{parameter.paramName}}].</p>
  
  <p>In my controller I have:</p>
  
  <pre><code>$scope.formData = {};
  $scope.formData = {
    settings:
    {
      apiEndpoint: '',
      method: 'get'
    },
    parameters: {}
  };
  </code></pre>
  
  <p>I've also tried ng-model="formData.parameters.[parameter.paramName]" (based on this question <a href="https://stackoverflow.com/questions/12553617/how-can-i-set-a-dynamic-model-name-in-angularjs">How can I set a dynamic model name in AngularJS?</a>), but that doesn't eval and fails to set the ng-model value. I'm not sure if what I'm trying to accomplish is even possible. I'm assuming I need to go through the controller to achieve what I want, but any help would be appreciated.</p>