How do I properly ng-repeat through nested key value pairs in angularJS

angularjs, angularjs-ng-repeat, javascript, json

Solution

You are pretty close, I updated the fiddle. http://jsfiddle.net/y9wj6/9/

   <ul ng-repeat="(key, prop) in templates">
        <li>{{key}}</li>
        <ul ng-repeat="val in prop">
            <ul ng-repeat="(o, values) in val">
            <li>{{o}}</li>
                 <ul ng-repeat="i in values">
                      <li>{{i}}</li>
                  </ul
             </ul>
        </ul>
    </ul>

Problem

View live code: Angular JS How in the world do I properly loop through nested key value pairs and properly output them like below? View I want is a tree like so ``` -touts -classes -col-12 -col-md-12 -col-lg-12 ``` Currently the view is: ``` touts {"classes":["col-12","col-md-12","col-lg-12"]} ``` JS: ``` var currentApp = angular.module('currentApp', []); currentApp.controller('ACtrl', function($scope){ $scope.templates = { 'touts' : [ { 'classes' : ['col-12', 'col-md-12', 'col-lg-12' ] } ] }; }); ``` HTML: ``` <div ng-app="currentApp"> <div ng-controller="ACtrl"> <ul ng-repeat="(key, prop) in templates"> <li>{{key}}</li> <li> <ul ng-repeat="class in templates[key]"> <li>{{class}}</li> </ul> </li> </ul> </div> </div> ```

Original source