make menu and submenu angularjs from database mysql - php

Question

how to create menu and sub menu html from angular with database MySql.
i have table from mysql like this.
id menu
1 master
2 aplikasi
3 laporan
menu.php
<div id='cssmenu'>
<ul>
<li ><a href='#'><span>HOME</span></a></li>
<li class='has-sub'><a href='#'><span>Master</span></a>
<ul>
<li><a ui-sref="user" ui-sref-active="active"><span>User</span></a></li>
<li><a ui-sref="produk" ui-sref-active="active"><span>Produk</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Aplikasi</span></a>
<ul>
<li><a ui-sref="transaksi" ui-sref-active="active"><span>Transaksi</span></a></li>
<li><a ui-sref="stok" ui-sref-active="active"><span>Stok Barang</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>laporan</span></a>
<ul>
<li><a ui-sref="itt" ui-sref-active="active"><span>Item terdisplay</span></a></li>
</ul>
</li>
</ul>
</div>
<!-- my app.js-->
var app = angular.module("app",['ui.router']); // jangan lupa kita inject module ui.router
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state("itt",{
url: "/itt",
templateUrl : "modul/itt/itt.php"
})
.state("home",{
url : "/home",
templateUrl : "home.php" // path template
})
.state("user",{
url: "/user",
template : "<h1>Halaman User</h1>"
//controller : "Menu3Ctrl"
})
.state("produk",{
url: "/produk",
template : "<h1>Halaman Produk</h1>"
//controller : "Menu3Ctrl"
})
.state("transaksi",{
url : "/transaksi",
template : "<h1>Halaman Transaksi</h1>"
});
$urlRouterProvider.otherwise("home");
});
i want replace menu in menu.php with my menu in database