title: Angular ng-repeat in table to iterate over key with array
body: <p>I am using Angular with Smart-Table to iterate through a nested array of objects to fill a table. I am able to get some of the values out easily, but others have proved difficult. In the sample data below, you'll see that the keys <code>voucherNumber</code>, <code>vendor</code>, <code>description</code>, and <code>amount</code> are attached to array values. They are related in such a way that <code>voucherNumber[0]</code>, <code>vendor[0]</code>, <code>description[0]</code>, and <code>amount[0]</code> all refer to the same document.</p>
  
  <p>Currently, my code below shows <code>period</code>, <code>uploadDate</code>, and <code>transferCode</code> correctly. The rest it just shows arrays (for example, under <code>voucherNumber</code> are two table cells, one containing <code>["34", "22"]</code> and the other <code>["12", "32"]</code>.</p>
  
  <p>I know the structure of this model is a bit convoluted, and I intend to simplify it a bit at a later point. Is there any way I can work with ng-repeat to get it to display properly in my table for the time being?</p>
  
  <pre><code>//Sample Code
  [{
      "period": 4,
      "uploadDate": "2015-11-19T21:00:00.000Z",
      "section":[{
        "transferCode": 8675309,
        "details": [
          {
            "voucherNumber": ["34", "22"],
            "vendor": ["jimmy", "jonny"],
            "description": ["blah", "blah2"],
            "amount": [45555, 3421]
          }
        ]
      }]
    },
    {
      "period": 4,
      "uploadDate": "2015-11-19T21:00:00.000Z",
      "section":[{
        "transferCode": 45576543,
        "details": [
          {
            "voucherNumber": ["12", "32"],
            "vendor": ["jane", "sarah"],
            "description": ["eep", "orp"],
            "amount": [97864, 23214]
          }
        ]
      }]
  
    }]
  
  //HTML and Angular
  
  &lt;div class="container"&gt;
    &lt;div ng-controller="TransferController as transfers"&gt;
  
      &lt;table st-table="transfers" class="table table-striped"&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th st-sort="period"&gt;Period&lt;/th&gt;
            &lt;th st-sort="uploadDate"&gt;Upload Date&lt;/th&gt;
            &lt;th st-sort="uploadDate"&gt;Transfer Code&lt;/th&gt;
            &lt;th st-sort="vendor"&gt;Vendor&lt;/th&gt;
            &lt;th st-sort="description"&gt;Description&lt;/th&gt;
            &lt;th st-sort="amount"&gt;Amount (SSP)&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;tr&gt;
            &lt;th colspan="4"&gt;
              &lt;input st-search placeholder="global search" class="input-sm form-control" type="search"/&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
            &lt;th&gt;
              &lt;input st-search="period" placeholder="search by period" class="input-sm form-control" type="search"/&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;input st-search="uploadDate" placeholder="search by upload date" class="input-sm form-control" type="search"/&gt;
            &lt;/th&gt; 
            &lt;th&gt;
              &lt;input st-search="transferCode" placeholder="search by transfer code" class="input-sm form-control" type="search"/&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;input st-search="vendor" placeholder="search by vendor" class="input-sm form-control" type="search"/&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;input st-search="description" placeholder="search by description" class="input-sm form-control" type="search"/&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;input st-search="amount" placeholder="search by amount" class="input-sm form-control" type="search"/&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody ng-repeat="toplevel in transfers.all"&gt;
          &lt;tr ng-repeat="code in toplevel.section"&gt;
            &lt;td&gt;{{ toplevel.period }}&lt;/td&gt;
            &lt;td&gt;{{ toplevel.uploadDate | date }}&lt;/td&gt;
            &lt;td&gt;{{ code.transferCode }}&lt;/td&gt;
            &lt;td  ng-repeat="detail in code.details"&gt;{{ detail.amount }}&lt;/td&gt;
            &lt;td  ng-repeat="detail in code.details"&gt;{{ detail.description }}&lt;/td&gt;
            &lt;td  ng-repeat="detail in code.details"&gt;{{ detail.amount }}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
  
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>