moncaでOnsen UIを使って開発しています。タイトルの通りなのですが、
「Error: This page's bottom-toolbar is already registered.」
というエラーの解決方法を探しています。angular.jsを使って書けば解決できるような気がしてますが、学習コストを考えるとなんとか今のやり方でできたらと考えています。
心当たりのある方どうかよろしくお願いします。

index.html (エラー再現用）

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        ons.bootstrap();

        (function(){
            $(document).on('pageinit','#page2',function(){
                var obj = $('#carousel_area');
                var buf = 
                      '<ons-carousel style="height:700px;" swipeable fullscreen auto-scroll var="carousel">'
                        + '<ons-carousel-item>'
                            + '<div style="height:500px;width=300px;background-color:blue;">'
                            + '<ons-button onClick="myNavigator.pushPage(\'template_page1\');">to Page1</ons-button>'
                        + '</div>'
                        + '</ons-carousel-item>'
                        + '<ons-carousel-item>'
                            + '<div style="height:500px;width=300px;background-color:green;">'
                            + '<ons-button onClick="myNavigator.pushPage(\'template_page1\');">to Page1</ons-button>'
                        + '</div>'
                        + '</ons-carousel-item>'
                        + '<ons-bottom-toolbar id="follow_bottom" var="my-bottom-toolbar" style="height:100px;">'
                            + 'Page2'
                        + '</ons-bottom-toolbar>'
                    + '</ons-carousel>';

                obj.html(buf);
                ons.compile(obj[0]);
            });
        })();

    </script>
</head>
<body>
    <ons-navigator var="myNavigator" page="template_page1">
    </ons-navigator> 

    <ons-template id="template_page1">
        <ons-page id="page1">
        <h1>page1</h1>
            <ons-button onClick="myNavigator.pushPage('template_page2');">to Page2</ons-button>
            <p>
            to Page1 => to Page2 => to Page1 => to Page2(エラー) 
            </p>
        </ons-page>
    </ons-template>

    <ons-template id="template_page2">
        <ons-page id="page2">

        <div id="carousel_area">
        </div>

        </ons-page>
    </ons-template>    
</body>
</html>