Recursive Menu with AngularJS

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body>
  
  <script type="text/ng-template"  id="menu_tpl.html">
    <span class="glyphicon {{ menu.icon }}"></span> <a href="{{menu.url}}">{{menu.name}}</a>
    <ul>
        <li ng-repeat="menu in menu.sub" ng-include="'menu_tpl.html'"></li>
    </ul>
  </script>

  <ul ng-controller="MenuCtrl">
      <li ng-repeat="menu in links" ng-include="'menu_tpl.html'"></li>
  </ul>
  
  </body>
</html>

var app = angular.module("App", []);
app.controller("MenuCtrl", ['$scope', function($scope) {
    $scope.links = [
         { url: "/dashboard", name: "Dashboard", icon: "glyphicon-home"},
         { url: "/inbox", name: "Inbox", icon: "glyphicon-inbox", sub:
             [
                { url: "", name: "All Messages", icon: "glyphicon-envelope"},
                { url: "", name: "Received Inquires", icon: "glyphicon-asterisk"},
                { url: "", name: "Sent Inquires", icon: "glyphicon-cog", sub:
                  [
                    { url: "", name: "All Messages", icon: "glyphicon-envelope"},
                    { url: "", name: "Received Inquires", icon: "glyphicon-asterisk"},
                    { url: "", name: "Sent Inquires", icon: "glyphicon-cog"},
                    { url: "", name: "Stared", icon: "glyphicon-star"},
                    { url: "", name: "Unread", icon: "glyphicon-envelope"},
                    { url: "", name: "Unanswered", icon: "glyphicon-minus-sign"},
                    { url: "", name: "Delete", icon: "glyphicon-trash"},
                  ]
                },
                { url: "", name: "Stared", icon: "glyphicon-star"},
                { url: "", name: "Unread", icon: "glyphicon-envelope"},
                { url: "", name: "Unanswered", icon: "glyphicon-minus-sign"},
                { url: "", name: "Delete", icon: "glyphicon-trash"},
             ]
         },
         { url: "", name: "My Trips", icon: "glyphicon-plane"},
         { url: "", name: "My Properties", icon: "glyphicon-folder-open"},
         { url: "", name: "Promotion Tools", icon: "glyphicon-flag", sub:
             [
                { url: "", name: "Property Ranking", icon: "glyphicon-th-list"},
             ]
         },
         { url: "", name: "Account", icon: "glyphicon-user", sub:
             [
                { url: "", name: "Profile Settings", icon: "glyphicon-wrench"},
                { url: "", name: "Payment Methods", icon: "glyphicon-credit-card"},
                { url: "", name: "Booking History", icon: "glyphicon-hdd"},
                { url: "", name: "Notifications", icon: "glyphicon-tasks"},
             ]
         },
         { url: "", name: "Log Out", icon: "glyphicon-remove-circle"},
    ];
}]);