title: AngularJS - an easier way to bind one to one and one to many relationships?
body: <p>I am going through the angular tutorial where you build a phone informational website and at the same time I am exploring more complicated data structures that one would see in a real enterprise application using grails restful json services; such as adding to the Phone model a form factor which is a one to one relationship and also adding multiple patents that cover the Phone entity in a one to many relationship. </p>
  
  <p>Is there an easier way than below to bind the HTML to the different model data structures such that a one to one and a one to many relationship doesn't require the non-ellegant use of ng-repeat? </p>
  
  <p>Ideally I'd like a simpler way than nesting ng-repeat elements to grab the description for the formFactor and having to nest 3 deep ng-repeats in order to list the sub-record information for each patent object when I am using ng-repeat to list each phone. </p>
  
  <p>Is a simpler method possible than the one shown below?</p>
  
  <p>This is the Angular-ized HTML:</p>
  
  <pre><code>&lt;div class="list-group"&gt;
      &lt;a href="#" class="list-group-item" ng-repeat="phone in phones | filter:query | orderBy:orderProp"&gt;
          &lt;h4 class="list-group-item-heading"&gt;{{phone.name}} &lt;span ng-repeat="formFactor in formFactors | filter:phone.formFactor.id"&gt;({{formFactor.description}})&lt;/span&gt;&lt;/h4&gt;
          &lt;p class="list-group-item-text"&gt;{{phone.snippet}}&lt;/p&gt;
          &lt;hr /&gt;
          &lt;p&gt;&lt;span class="list-group-item-heading"&gt;Patents covering phone:&lt;/span&gt;
              &lt;ul class="list-group"&gt;
                  &lt;li class="list-group-item" ng-repeat="phPat in phone.patents"&gt;&lt;span ng-repeat="patent in patents | filter:{id:phPat.id}"&gt;{{patent.patentNumber + ': ' + patent.patentAbstract}}&lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/p&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the angular controller code:</p>
  
  <pre><code>var templateApp = angular.module('templateApp', []);
  
  templateApp.controller('PhoneListCtrl', ['$scope', '$rootScope', '$http', '$location',
      function($scope, $rootScope, $http, $location)
  {
      $http.get('phone/index').success(function(data)
      {
          $scope.phones = data;
      });
  
      $http.get('formFactors.json').success(function(data)
      {
          $scope.formFactors = data;
      });
  
      $http.get('formFactors.json').success(function(data)
      {
          $scope.formFactors = data;
      });
  
      $scope.orderProp = 'age';
  }]);
  </code></pre>
  
  <p>This is the JSON the web services return:
  phone/index:</p>
  
  <pre><code>[
      {
          "class": "package.Phone",
          "id": "12",
          "age": 4,
          "formFactor": {
              "id": 10
          },
          "imageURL": "asdf",
          "name": "Motorola DEFY with MOTOBLUR",
          "patents": [
              {
                  "id": 9
              },
              {
                  "id": 7
              },
              ...
          ],
          "snippet": "Are you ready for everything life throws your way?"
      },
      ...
  ]
  </code></pre>
  
  <p>formFactors.json:</p>
  
  <pre><code>[
      {
          "id": 12,
          "description": "tablet"
      },
      {
          "id": 11,
          "description": "smartphone"
      },
      ...
  ]
  </code></pre>
  
  <p>patents.json:</p>
  
  <pre><code>[
      {
          "id": 9
          "patentAbstract": "four score...",
          "patentNumber": "789"
      },
      {
          "id": 8
          "patentAbstract": "lorem ipsum....",
          "patentNumber": "456"
      }
      ...
  ]
  </code></pre>
  
  <p><strong>update:</strong> Thanks to the answer below this is what I ended up writing in the controller so that all the data is immediately available directly to the template so we don't have to do any of that nasty triple nesting ng-repeats:</p>
  
  <pre><code>angular.forEach($scope.phones, function(phone,i) 
  {
      phone.formFactor = angular.findWhere($scope.formFactors, {id:phone.formFactor.id});
  
      angular.forEach(phone.patents, function(phPat, i) 
      {
          if(typeof phone.patentInfo == 'undefined') 
          {
              phone.patentInfo = $filter('filter')($scope.patents, {id:phPat.id});
          } 
          else 
          {
              phone.patentInfo.push( $filter('filter')($scope.patents, {id:phPat.id})[0] );
          }
      });
  });
  </code></pre>