title: AngularJS: nested objects from dynamically set model names
body: <p>I have an array containing variable names, example:</p>
  
  <pre><code>var names = ['address.street','address.city'];
  </code></pre>
  
  <p>I want to create input fields out of these, and I'm using AngularJS. No big deal:</p>
  
  <pre><code>&lt;div ng-repeat="n in names"&gt;
      &lt;input type="text" ng-model="data[n]" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The resulting <code>$scope.data</code> object is:</p>
  
  <pre><code>{
      "address.street" : ...,
      "address.city" : ...
  }
  </code></pre>
  
  <p>Which, by the way, is not exactly what I'm trying to achieve.
  Is there a syntax that could lead me to an object as the following one as result?</p>
  
  <pre><code>{
      "address" : {
          "street" : ...,
          "city" : ...
      }
  }
  </code></pre>
  
  <p>Please consider that I can have even more than one level of nesting, this is just an example.</p>