how to fetch json data in angularjs repeat directive?
<p>I want to know that, how should i fetch the <strong>main menu</strong> from my json file in ng-repeat separately and sub menus separately.</p>

<p>Below are my files</p>

<blockquote>
  <p>menu.json</p>
</blockquote>

<pre><code>{"data":
    {
        "main menu":
        {
            "menu1":
            [
                {"id":1, "name":"level 2", "body":"this is a body."},
                {"id":2, "name":"something new", "body":"this is a body new."}
            ],
            "menu2":
            [
                {"id":1, "name":"cobat_something", "body":"this is a body of cobat."},
                {"id":2, "name":"cobat_something new", "body":"this is a body of cobat new."}
            ]
        }
    }
}
</code></pre>

<p>here is my js file</p>

<blockquote>
  <p>app.js</p>
</blockquote>

<pre><code>(function(){
    var app = angular.module('myApp', []);

    app.controller('mainController', ['$http', function($http){
        var mainCtrl = this;
        $http.get('menu.json').success(function(data){
            mainCtrl.menus = data;
        });
    }]);

})();
</code></pre>

<p>and this is my html file</p>

<blockquote>
  <p>index.html</p>
</blockquote>

<pre><code>    &lt;body ng-controller="mainController as mainCtrl"&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="menu in mainCtrl.menus"&gt;
        {{menu}}
        &lt;ul&gt;
          &lt;li ng-repeat="subMenu in mainCtrl.menus"&gt;
            {{subMenu.main menu}}
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

    &lt;/body&gt;
</code></pre>