title: AngularJS multidimensional arrays
body: <p>I am looking for a way to bind data from a three dimensional array in the scope with my view..</p>
  
  <p>My scope (short version) looks like this</p>
  
  <pre><code>$scope.publicationData = [ 
      { pubId:'1' , pubName:'Level 1 A' , pubCat:[
          { pubCatId:'1' , pubCatName:'Level 2 A', pubSubCat:[ 
              { pubSubCatId:'1' , pubSubCatName:'Level 3 A' }, 
              { pubSubCatId:'2' , pubSubCatName:'Level 3 B' }
              ]
          },
          { pubCatId:'2' , pubCatName:'Level 2 B', pubSubCat:[
              { pubSubCatId:'3' , pubSubCatName:'Level 3 C' },
              { pubSubCatId:'4' , pubSubCatName:'Level 3 D' }
              ]
          }
          ]
      }];
  </code></pre>
  
  <p>In the view I have code that successfully presents what is in the first and second array dimension,, but I can't get values from pubSubCatId or pubSubCatName</p>
  
  <p>HTML + Angular View</p>
  
  <pre><code>&lt;div ng-controller="myPublictionCtrl"&gt;
  
  &lt;div ng-repeat="publication in publicationData"&gt;
  
      &lt;ul&gt;
          &lt;li &gt;
                              &lt;!-- This works --&gt;
              {{publication.pubId}}. {{publication.pubName}}
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul&gt;
                      &lt;!-- This works --&gt;
  
          &lt;li ng-repeat="category in publication.pubCat"&gt;
              {{category.pubCatId}}. {{category.pubCatName}}
          &lt;/li&gt;
  
      &lt;/ul&gt;
  
      &lt;ul&gt;
                      &lt;!-- This doesn't work --&gt;
  
          &lt;li ng-repeat="subcategory in publication.pubCat.pubSubCat"&gt;
              {{subcategory.pubSubCatName}}
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How would I retrieve data from deeper layers of the scope. Can AngularJS do this?</p>