title: Angular js create dynamic menu using json
body: <p>I am new to angular js .I need to create a dynamic menu and hyperlink using angular js.
  I have menu name and hyperlink coming from json and i need to display.
  Currently i have tried with static menus which is working.</p>
  
  <p>My menu structure is like</p>
  
  <pre><code>Home
  
  Services
  
          -ser1
          -ser2
          -ser3
  
  About
  
      -abt1
  
  Contact
  </code></pre>
  
  <p>All the menu values and hyperlink comes from json file.</p>
  
  <p>This is my json</p>
  
  <pre><code> [
      {
          "id": 100,
          "product": 0,
          "childs": [
              {
                  "id": 200,
                  "description": {
                      "id": 0,
                      "name": "Home",
                      "url": "home"
                  }
              }
          ]
      },
      {
          "id": 100,
          "description": {
              "id": 0,
              "name": "services",
              "url": "services"
          },
          "parent": null,
          "childs": [
              {
                  "id": 200,
                  "description": {
                      "id": 0,
                      "name": "Ser1",
                      "url": "Ser1"
                  },
                  "productCount": 0,
                  "childs": [
                      {
                          "id": 250,
                          "description": {
                              "id": 0,
                              "name": "ser2",
                              "url": "Ser2"
                          },
                          "childs": []
                      },
                      {
                          "id": 251,
                          "description": {
                              "id": 0,
                              "name": "ser3",
                              "url": "ser3"
                          },
                          "productCount": 0,
                          "childs": []
                      }
                  ]
              }
          ]
      },
      {
          "id": 201,
          "description": {
              "id": 0,
              "name": "About",
              "url": "about"
          },
          "productCount": 0,
          "childs": [
              {
                  "id": 203,
                  "description": {
                      "id": 0,
                      "name": "abt1",
                      "url": "underground"
                  },
                  "productCount": 0,
                  "childs": []
              }
          ]
      },
      {
          "id": 202,
          "description": {
              "id": 0,
              "name": "Contact",
              "url": "con"
          },
          "productCount": 0,
          "childs": []
      }
  ]
  </code></pre>
  
  <p>And this is my HTML</p>
  
  <pre><code>&lt;li class="prod-dropdown" ng-repeat="menu in menus" ng-class="{proddropdown: menu.menus}"&gt;
                      &lt;a ng-href="#/{{menu.action}}" ng-class="{'dropdown-toggle': menu.menus}"
                         data-toggle="dropdown"&gt;{{menu.menus.desc['name']}} &lt;/a&gt;
                      &lt;ul ng-if="menu.menus" class="dropdown-menu"&gt;
                          &lt;li ng-repeat="submenu in menu.menus"&gt;
                              &lt;a ng-href="#/{{submenu.action}}"&gt;{{submenu.desc}}&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
  </code></pre>