title: Grouping and translating nested objects
body: <p>I need to group and translate nested JSON data, for <code>&lt;select&gt;</code> control, that I'm receiving from a http service, ideally not touching the data format on client side nor creating helper structures. So controller would contain near-zero logic for this and whole grouping &amp; translation would be on HTML markup side. </p>
  
  <p>Data I'm receiving is an array of multiple <code>work groups</code>, where each holds reference to a <code>service type</code> it is related to and all of the <code>work items</code> the group has. So (simplified) structure is array of:</p>
  
  <p><strong>Data</strong></p>
  
  <pre><code>[{
      "id": 1,
      "serviceTypeId": 1
      "works": [{
          "id": 101
      },{
          "id": 102
      }]        
  }, ...
  </code></pre>
  
  <p>For each service type, work group and work I'm only receiving the <code>id</code> and I need to translate the values on client, according to current locale. Translations are in JSON files where all key-value pairs are structured as <code>&lt;KEY&gt;.&lt;id&gt;:&lt;translation&gt;</code>. For example:</p>
  
  <p><strong>Translations</strong></p>
  
  <pre><code>"WORKGROUP.1" : "Some group",
  "WORKGROUP.2" : "Other group",
  ...
  "WORK.101" : "Work number 101
  ...
  </code></pre>
  
  <p>So I need to combine the <code>id</code> with known <code>key</code> to get the correct display value.</p>
  
  <p>What I need is a <code>&lt;select&gt;</code> control where all possible <code>work groups</code> are grouped by <code>service type</code>. Selecting a group would then show all related <code>works</code>. This is what I currently have.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select ng-model="selectedGroup" 
          ng-options="'WORKGROUP.' + g.id | translate group by 'SERVICETYPE.' + g.serviceTypeId | translate for g in groups" 
          ng-change="groupChanged()"&gt;&lt;/select&gt;
  ...
  
  &lt;span ng-hide="!selectedGroup"&gt;
    &lt;label&gt;
      {{ 'WORKS' | translate }} -
      {{ 'SERVICETYPE.' + selectedGroup.serviceTypeId | translate }} - 
      {{ 'WORKGROUP.' + selectedGroup.id | translate }}
      &lt;/label&gt;
    &lt;div ng-repeat="work in groupWorks"&gt;
        {{ 'WORK.' + work.id | translate }} &lt;br /&gt;
    &lt;/div&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>The above works just fine but it uses the "group" var I have created from raw data (see link to plunkr below). Is there ANY way to get this kind of grouping &amp; translation of items without added logic on controller side?</p>
  
  <p>Here's related plunker with desired outcome: <a href="http://plnkr.co/edit/99gVZe" rel="nofollow">http://plnkr.co/edit/99gVZe</a> </p>
  
  <p><strong>EDIT:</strong>
  Based on amazing insight by @plalx, here's link to what-I-wanted-to-achieve <a href="http://plnkr.co/edit/3bMZZs" rel="nofollow">http://plnkr.co/edit/3bMZZs</a></p>