Bind <div> to element of Angular controller <p>We have a somewhat complicated model on an AngularJS controller:</p> <pre><code>function controller($scope) { $scope.model = { childmodel1: { childmodel2: { property1: 'abc', property2: 3, property3: 0.5, property4: 'abc' } } } } </code></pre> <p>In the HTML markup, we don't want to repeat the whole access chain everytime we access <code>childmodel2</code>:</p> <pre><code>&lt;div ng-controller="ctrl"&gt; &lt;div&gt; &lt;input type="text" ng-model="model.childmodel1.childmodel2.property1" /&gt; &lt;input type="text" ng-model="model.childmodel1.childmodel2.property2" /&gt; &lt;input type="text" ng-model="model.childmodel1.childmodel2.property3" /&gt; &lt;input type="text" ng-model="model.childmodel1.childmodel2.property4" /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Is there an AngularJS directive that creates a sub-scope like this:</p> <pre><code>&lt;div ng-controller="ctrl"&gt; &lt;div ng-unknowndirective="model.childmodel1.childmodel2"&gt; &lt;input type="text" ng-model="property1" /&gt; &lt;input type="text" ng-model="property2" /&gt; &lt;input type="text" ng-model="property3" /&gt; &lt;input type="text" ng-model="property4" /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>It's the same thing that's done on <code>ng-repeat</code>, but without the repetition :)</p> <p>We tried <code>ng-scope</code>, <code>ng-controller</code>, <code>ng-model</code>, none of them works this way. Googling didn't yield any results, we don't know the terminology to search for.</p>