title: How do you dynamically assign an ngmodel by dot separated path
body: <p>I have seen several questions similar to this but my question is slightly different.</p>
  
  <p>I have an object on my controller that looks something like this:</p>
  
  <pre><code>$scope.data = {
    foo: {bar: 1,
          bas: 2},
    biz: 3,
    blat: 4
  };
  </code></pre>
  
  <p>I would like to create an input that can have its ng-model dynamically assigned to any of those values.</p>
  
  <pre><code>&lt;label&gt;Define Model&lt;/label&gt;
  &lt;input type="text" ng-model="input.model" /&gt;
  
  &lt;label&gt;Data for {{input.model}}:&lt;/label&gt;
  &lt;input type="text" ng-model="{{input.model}}"&gt;
  </code></pre>
  
  <p>Ideally this would allow me to set the "Define Model" input to something like <code>data.foo.bas</code> and the "Data for data.foo.bas" input would have a value of 2.</p>
  
  <p>I am aware I can do something like this: </p>
  
  <pre><code>&lt;label&gt;Define Model&lt;/label&gt;
  &lt;input type="text" ng-model="input.model" /&gt;
  
  &lt;label&gt;Data for {{input.model}}:&lt;/label&gt;
  &lt;input type="text" ng-model="data[input.model]"&gt;
  </code></pre>
  
  <p>but this would only allow me to access the biz and blat attributes.  Does anyone have any ideas how this might be done?  Thanks. </p>