Can't create a sub menu using mg-repeat(Angularjs).

so whenever a new menu item is added to this WordPress database it should automatically change in my page too without re-writing the code.

In this above code, the menu items and sub menu items are manually written in the JSON so whenever any new menu item is added to the WordPress database I need to add it in the code too.

So I changed the method to this:

   var app = angular.module('menuApp', []);

  app.controller("menuController", function($scope,$http)

  {

var baseUrl = 'http://localhost:8080/samplepage/';

    $http.get(baseUrl+'Home/getmenu').then(function(response)

    {    

    console.log(response);

    $scope.menus = response.data;

 });

});, By using this code i get the main menu item , and print it using <a rel='nofollow' href="{{menu.url}}">{{menu.post_title}}</a>. This is the result i got:

But im struggling to create a sub menu under the News. 

so Is there any way to get the new menu items adding to the database to appear in the menu on my new web page dynamically.

my sample structure of the database is given below:

I hope you understand what my problem. If not please tell me . 

Any suggestions are greatly appreciated. Thanks in advance.