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