Angular Url Provider and mmenu doesn't work together

I am trying to show sidebar menu on the website. However, it doesn't appear.

App code:

appModule.config([
'$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {

    // Default route (overrided below if user has permission)
    $urlRouterProvider.otherwise("/home");

    $stateProvider.state('home', {
        url: '/home',
        templateUrl: '~/App/common/views/home/index.cshtml',
        menu: 'Home'
    });}

html and js code :

<script type="text/javascript" src="~/custom/js/jquery.mmenu.min.all.js"></script>

@* Below JS is for slide out menu *@

<script type="text/javascript">
    $(document).ready(function () {
        $("#menu").mmenu({
            "slidingSubmenus": false,
            "offCanvas": {
                "zposition": "front",
                "pageSelector": "#page"
            }
        });
    });
</script>

 <a href="#menu" class="navbar-brand">
                <button class="navbar-toggle" type="button">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </a>


<nav id="menu">
<ul>
   <li><a href="/application#/home">test</a></li></ul></nav>

Here is the website that I get:

http://mmenu.frebsite.nl/examples.html