I am looking for a way to bind data from a three dimensional array in the scope with my view..

My scope (short version) looks like this

$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' }

            ]

        }

        ]

    }];

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

HTML + Angular View

<div ng-controller=myPublictionCtrl>



<div ng-repeat=publication in publicationData>



    <ul>

        <li >

                            <!-- This works -->

            {{publication.pubId}}. {{publication.pubName}}

        </li>

    </ul>



    <ul>

                    <!-- This works -->



        <li ng-repeat=category in publication.pubCat>

            {{category.pubCatId}}. {{category.pubCatName}}

        </li>



    </ul>



    <ul>

                    <!-- This doesn't work -->



        <li ng-repeat=subcategory in publication.pubCat.pubSubCat>

            {{subcategory.pubSubCatName}}

        </li>

    </ul>

</div>

</div>

How would I retrieve data from deeper layers of the scope. Can AngularJS do this?