title: How to populate values in <li> using ng-repeat from JSON
body: <p>As this AngularJS is new to me,  I was trying to populate dropdown value of the list using JSON and ng-repeat. I saw ng-option for <strong>"select"</strong> but nothing as such for <strong>"li"</strong></p>
  
  <p>Below is the piece of JSON file I am trying to read from:</p>
  
  <pre><code>[
  {
      "header": {
          "name": "Electronics",
          "subHeader": {
              "childHeader": [{
                      "name": "Mobiles",
                      "view": "#mobile"
                  }, {
                      "name": "Tablet",
                      "view": "#tablet"
                  }, {
                      "name": "Television",
                      "view": "#television"
                  }, {
                      "name": "Headphones",
                      "view": "#headphones"
                  }]
          }
      },
          "name": "Men",
          "subHeader": {
              "childHeader": [{
                      "name": "Shirts",
                      "view": "#shirts"
                  }, {
                      "name": "T-Shirts",
                      "view": "#tshirts"
                  }, {
                      "name": "Jeans",
                      "view": "#jeans"
                  }, {
                      "name": "Trousers",
                      "view": "#trousers"
                  }]
          }
      }
  
  ]
  </code></pre>
  
  <p>The JS file is as below and is working fine:</p>
  
  <pre><code>var mainAngular = angular.module('myApp', ['ngRoute']);
  mainAngular.controller('headerCategoryController', function($scope,$http) {
  var hCat=  "./customAngular/headerCatalogue.json";
  $http.get(hCat).success(function(response){
      $scope.categories=response;
  });
  });
  </code></pre>
  
  <p>I want it in to be generated in below format:</p>
  
  <pre><code>            &lt;div class="headerMenu" &gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Electronics&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="index_category.htm"&gt;Mobiles&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="product.htm"&gt;Tablets&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="cart.htm"&gt;Televisions&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="checkout.htm"&gt;Headphones&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Men&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="index_category.htm"&gt;Shirts&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="product.htm"&gt;T-Shirts&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="cart.htm"&gt;Trousers&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="checkout.htm"&gt;Jeans&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>What I am doing right now is this:</p>
  
  <pre><code>&lt;div class="headerMenu" ng-controller="headerCategoryController"&gt;
                      &lt;ul class="nav navbar-nav" ng-repeat="category in categories"&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="" class="dropdown-toggle" data-toggle="dropdown"&gt;{{category.header.name}}&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li ng-repeat="val in category"&gt;&lt;a href="{{val.header.subHeader.childHeader.view}}"&gt;{{val.header.subHeader.childHeader.name}}&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I refered "<a href="https://stackoverflow.com/questions/29111199/json-array-disply-in-li-using-angular-js">json array disply in &lt;li&gt; using angular js</a>" link for this but still no luck. Can someone please help !</p>