title: Binding dynamically to ng-model for multi level deep object using Angular JS
body: <p>I am fairly new to Angular JS and I have run into a problem. I am creating a dynamic form where the elements come from the Database for example:
  order object:</p>
  
  <pre><code>public int Id { get; set; }
  public string LenderName { get; set; }   
  public PropertyModel Property { get; set; } 
  </code></pre>
  
  <p>PropertyModel Object:</p>
  
  <pre><code>public string Zip{ get; set; }
  public string State { get; set; }
  </code></pre>
  
  <p>I was successfully able to dynamically bind ng-model for single level deep property like Example for Order.LenderName my input element is:</p>
  
  <pre><code>&lt;input type="text" ng-model="order[element.ModelName]"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>this perfectly binds to the $scope.order.LenderName</p>
  
  <p>Note: element.ModelName = "LenderName" or rather I could say the order property name</p>
  
  <p>my sample code is below:</p>
  
  <pre><code>&lt;div ng-repeat="element in eventSchemaElementList"&gt;
      &lt;div ng-switch="element.FieldTypeCode"&gt;
          &lt;div class="topBottomPadding"&gt;
              &lt;div class="col-sm-2 alignRight"&gt;
                  &lt;label&gt;{{element.SchemaFieldName}}:&lt;/label&gt;
              &lt;/div&gt;
              &lt;div ng-switch-when="TextBox" class="col-sm-10"&gt;
                  &lt;input type="text" ng-model="order[element.ModelName]" /&gt;
              &lt;/div&gt;
              &lt;div ng-switch-when="TextArea" class="col-sm-10"&gt;
                  &lt;textarea ng-model="order[element.ModelName]"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the above code I am not able to figure out How I can dynamically bind Order.Property.State to ng-model.
    the above code works only for one level deep. I am not sure how to do it for order.Property.State
    I also tried doing this:</p>
  
  <pre><code>&lt;input type="text" ng-model="order[element.ModelName]" /&gt;
  </code></pre>
  
  <p>Where element.ModelName = Property[State]</p>
  
  <p>I also tried hardcoding it as order[Property[State]] in the input still did not work</p>
  
  <pre><code>&lt;input type="text" ng-model="order[Property[State]]" /&gt;
  </code></pre>
  
  <p>For the above ones It does not bind to the order.Property.State but it creates a new property as Property[State]. It is really confusing because I have objects that go 4 or 5 level deep.</p>
  
  <p>Help or suggestions will be really appreciated thanks in Advance !!!</p>