Меню Onsen UI.toggle() не работает после добавления навигатора со скользящим меню

Я хочу добавить страницу перед моей страницей скользящего меню. Мне это удалось. Но теперь я не могу получить доступ к menu.toggle(); Я зарегистрировал объект меню с надписью undefined. И я также пробовал navi.menu, но это тоже не работает. Это самое близкое решение, которое у меня есть, но нет menu.toggle Пользовательский интерфейс Onsen — использование слайд-меню только для конкретных страниц вот мой код

<ons-navigator title="Navigation" var="navi" page="homePage.html">

    </ons-navigator>

    <ons-template id="homePage.html">
        <ons-page ng-controller="mainPageController">
            <ons-toolbar>
                <div class="center">PHPTRAVELS</div>
                <div class="right">
                    <ons-toolbar-button>Exit</ons-toolbar-button>
                </div>
            </ons-toolbar>
            <ons-row class="home-page">
                <ons-col>
                    <ons-list>
                        <ons-list-item modifier="tappable" 
                            style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[2].status"
                            ng-click="navi.pushPage('home.html')">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-building" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Hotels</div>
                                    <div class="description">Find the perfect hotel room</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[6].status || modules[7].status">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-plane" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Flights</div>
                                    <div class="description">Get the best flight</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[3].status">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-briefcase" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Tours</div>
                                    <div class="description">Your vacation awaits</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[1].status">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-car" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Cars</div>
                                    <div class="description">Seek a deal on wheels</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                        <ons-list-item modifier="tappable" style="line-height: 25px; font-size: 12px; padding: 5px;" 
                            ng-show="modules[0].status">
                            <ons-row>
                                <ons-col width="70px" class="ic">
                                    <ons-icon icon="fa fa-leanpub" size="50px"></ons-icon>
                                </ons-col>
                                <ons-col>
                                    <div class="title">Blog</div>
                                    <div class="description">Travel news portal</div>
                                </ons-col>
                            </ons-row>
                        </ons-list-item>
                    </ons-list>
                </ons-col>
            </ons-row>
        </ons-page>
    </ons-template>

    <ons-sliding-menu
        menu-page="menu.html" main-page="home.html" side="left"
        var="menu" type="reveal" max-slide-distance="260px">
    </ons-sliding-menu>

    <ons-template id="menu.html">
      <ons-page modifier="menu-page">

        <br><br>
        <ons-list class="menu-list">
            <ons-list-item menuitem class="menu-item selected" ng-click="menu.setMainPage('home.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-home"></i>
                &nbsp;&nbsp;Home
            </ons-list-item>

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('browsehotels.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-calendar"></i>
                &nbsp;&nbsp;Browse Hotels
            </ons-list-item>

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('specialoffers.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-gift"></i>
                &nbsp;&nbsp;Special Offers
            </ons-list-item>        

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('blog.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-th-list"></i>
                &nbsp;&nbsp;Blog
            </ons-list-item>        

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('mybookings.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-user"></i>
                &nbsp;&nbsp;My Bookings
            </ons-list-item>        

            <ons-list-item menuitem class="menu-item" ng-click="menu.setMainPage('contactus.html', {closeMenu: true});">
                &nbsp;&nbsp;<i class="glyphicon glyphicon-map-marker"></i>
                &nbsp;&nbsp;Contact Us
            </ons-list-item>        

        </ons-list>

      </ons-page>
    </ons-template>

    <ons-template id="home.html">
    <!-- <ons-navigator var="nav"> -->
      <ons-page ng-controller="homeController">
        <ons-toolbar>
          <div class="left">
            <ons-toolbar-button ng-click="menu.toggle();">
              <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
            </ons-toolbar-button>
          </div>
          <div class="center text-center">PHPTRAVELS</div>
          <div class="right">
            <ons-toolbar-button>
                <!-- <ons-icon icon="refresh" size="30px" spin="{{isFetching}}" fixed-width="true"></ons-icon> -->
                <ons-icon icon="ion-load-c" ng-show="isFetching" spin="{{isFetching}}"></ons-icon>
            </ons-toolbar-button>
          </div>
        </ons-toolbar>
<div>some text</div>
</ons-page>


</ons-template>