title: How to properly access nested elements using ng-repeat?
body: <p>I have the following JSON objects to be accessed using ng-repeat. I got all the names on the first column instead of grouping into different columns.</p>
  
  <pre><code>$scope.tableItems = [
  {
    "title": "BUILDING ID",
    "subtitle": [
      {
          "name": "Nexon"
      },
      {
          "name": "Kodak"
      },
      {
          "name": "Lion"
      }
    ]
  },
  { 
    "title": "TECHNOLOGY",
    "subtitle": [
      {
          "name": "Robotic"
      },
      {
          "name": "AI"
      },
      {
          "name": "Algorithm"
    ]
  }
  
  ];
  </code></pre>
  
  <p>I tried to access it like this using jade,</p>
  
  <pre><code>    table
          thead
              tr
                  th(ng-repeat = "x in tableItems") {{ x.title }} //- get BUILDING ID and TECHNOLOGY
          tbody(ng-repeat = "x in tableItems")  //- get all the NAMEs
              tr(ng-repeat = "(key, value) in x.subtitle")
                  td {{ value.name }}
  </code></pre>
  
  <p>And the result returned </p>
  
  <pre><code>BUILDING ID                 TECHNOLOGY
  
  Nexon
  
  Kodak
  
  Lion
  
  Robotic
  
  AI
  
  Algorithm
  </code></pre>
  
  <p>I want it to be able to print the table according to the table header, so under </p>
  
  <p>"BUILDING ID" will have only 3 items (Nexon, Kodak and Lion) and for "TECHNOLOGY" </p>
  
  <p>will have (  Robotic, AI and Algorithm ). What's missing on my code ?</p>