title: AngularJS - Display complex JSON data with a single ng-repeat
body: <p>I am trying to display all the books of some series. I used nested ng-repeat and it works well. However, due to some recent changes on layout requirements, I cannot use nested ng-repeat (I want a single list of books). I would expect something like below</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;book1 of series1&lt;/li&gt;
      &lt;li&gt;book 2 of series 1&lt;/li&gt;
      &lt;li&gt;book1 of series 2&lt;/li&gt;
      &lt;li&gt;book2 of series 2&lt;/li&gt; 
      &lt;li&gt;book1 of series 3&lt;/li&gt;
      &lt;li&gt;book2 of series 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is there a way to do it with 1 ng-repeat? Or with other approach? (I.e. Array)</p>
  
  <p><strong>Data</strong></p>
  
  <pre><code>var data = {
      "records": [
          {
              "name": "Spectrum Series",
              "seriesid": "SpectrumSeries",
              "book": [
                  {
                      "name": "White Curse",
                      "bookid": "WhiteCurse",
                      "image": "book1"                    
                  },
                  {
                      "name": "Blue Fox",
                      "bookid": "BlueFox",
                      "image": "book2"                   
                  }
              ]
          }
  
  … other series
   ]
  };
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>$scope.serieslist = data.records;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div ng-repeat="series in serieslist"&gt;
          &lt;ul ng-repeat="book in series.book"&gt;            
              &lt;li&gt;                  
                  &lt;div&gt;{{series.name}}&lt;/div&gt;
                  &lt;div&gt;{{book.name}}&lt;/div&gt;                    
              &lt;/li&gt;            
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>