monacaを使って開発してます。
その際、slidemenuを使う関係上、index.htmlにslidemenuを書き込み、navigatorをhomeに指定しました。
toolbarの左側にslidemenuを、右側にpopoverで通知を出したいと思い記述しましたが、上手く反応しません。タップしてもpopoverがなされません。

--home.html

<ons-navigator title="PENDONA" animation="slide" var="navi">
        <link rel="stylesheet" href="css/carousel.css">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
                </div>
                <div class="center">Home</div>
                <div class="right" id="tsuti">
                    <ons-toolbar-button onclick="navi.show('popover.html')"><ons-icon icon="ion-ios-bell"></ons-icon></ons-toolbar-button>
                </div>
            </ons-toolbar>
<!--　中略　-->

    </ons-page>
</ons-navigator>

<中略>

<ons-template id="popover.html">
    <ons-popover cancelable style="width: 95%; max-width: 300px;" direction="down" animation="fade">
        <ons-row>
            <ons-col class="menu-item-col" onclick="menu.hide()">
                <ons-icon icon="ion-upload" class="menu-item-icon"></ons-icon>
                <div class="menu-item-label">新着通知</div>
            </ons-col>
            <ons-col class="menu-item-col" onclick="menu.hide()">
                <ons-icon icon="ion-folder" class="menu-item-icon"></ons-icon>
                <div class="menu-item-label">フォルダを作成</div>
            <ons-col class="menu-item-col" onclick="menu.hide()">
                <ons-icon icon="ion-edit" class="menu-item-icon"></ons-icon>
                <div class="menu-item-label">編集</div>
            </ons-col>
        </ons-row>
    </ons-popover>
</ons-template>

としています。

CSSやJavascriptはindex.htmlで読み込んでいます。

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="components/loader.css">

    <script src="js/vendor/ncmb-latest.min.js"></script>
    <script>
        ons.bootstrap();
    </script>
    <script type="text/javascript" src="js/base.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/user.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
    <script type="text/javascript" src="js/popover.js"></script>
            <script>
            var a = 1;
            var b = 2;

            function debug(){
                var c = a + b;
                console.log("debug() function is executed!");
                console.log("executed! variable c is " + c);
            }

            debug();
        </script>
</head>
<body>

    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="home.html" swipable="true" swip-target-width="100px" max-slide-distance="150px" side="left" type="overlay">
    </ons-sliding-menu>

</body>
</html>

この際の読み込んでいるpopover.js(index.html)の記述は以下のとおりです。

popover.js

ons.ready(function() {
    ons.createPopover('popover.html').then(function(popover) {
    popover.show(e);   
    });
});

変数の渡し方が間違っていると思うのですが、サンプルを読んでもどの変数がどこに対応しているのかがよくわかりません。そこでご指導いただければと思いました。
よろしくお願いします。