Use AngularJS ng-repeat element property as div id
<p>I have this HTML:</p>

<pre><code>&lt;div data-ng-repeat="curService in sCtrl.myServices" class="ng-cloak" data-ng-if="sCtrl.service==curService.name"&gt;
       &lt;br /&gt;
       &lt;div id="curService.grid"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and this Angular:</p>

<pre><code>ctrl.myServices = [
         {
               name: "Service1",
               grid: "grid1",
               controller: "Controller1 as ctrl1"
         },
         {
               name: "Service2",
               grid: "grid2",
               controller: "Controller2 as ctrl2"
         }
];
</code></pre>

<p>I would like <code>curService.grid</code> to translate to the appropriate string, and have this string as the inner <code>div</code>'s id. Is there a way to do this?</p>

<p><strong>EDIT:</strong> I would also like to set my <code>ng-controller="{{curService.controller}}"</code>, but this syntax doesn't seem to work. Any tips?</p>