プッシュページでリンク先へスライド表示したいのですが上手く行きません。(ページ遷移しない)
logは吐き出されているので処理自体は通っている様なのですが、pushpageの書き方におかしいところは有りますでしょうか？

(function() {
    
    var isAndroid = navigator.userAgent.indexOf('Android') != -1;

//--------01
    $(document).on('click', '#homenews', function() {
        console.log('homenews clicked');
        index.navi.pushPage('sample.html', { animation: 'Slide Reveal Left' });
    });

//--------02
    $(document).on('click', '#homecalendar', function() {
        console.log('homecalendar clicked');
        index.navi.pushPage('index.html', { animation: 'Slide Reveal Left' });
    });
    
//--------03
    $(document).on('click', '#homelibrary', function() {
        console.log('homelibrary clicked');
        index.navi.pushPage('index.html', { animation: 'Slide Reveal Left' });
    });

//--------04
    $(document).on('click', '#homelinks', function() {
        console.log('homelinks clicked');
        index.navi.pushPage('sample.html', { animation: 'Slide Reveal Left' });
    });
    
})();
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
    <meta name="format-detection" content="telephone=no">
    <script src="components/loader.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <script src="js/angular-sanitize.min.js"></script>
    <script src="js/index.js"></script>    

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery.glide.min.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/onsen-css-components/onsen-css-components.min.css">
    <link rel="stylesheet" href="css/index.css">



    <script>
    </script>
        
</head>

<body>
    <ons-page id="index-list-page">
        
        <div class="logo" style="width:50%; position: absolute; left: 10px; bottom: 190px;">
            <img id="img-logo" src="img/logo_1.png" style="width:100%;"  >
        </div>
        

        <ons-list class="index-list">        
<!-- 1-->
            <ons-list-item modifier="chevron" class="index-item" style="height: 10px;" >
                <div id="homenews">
                    <span class="index-item-title" style="height: 10px;"><i class="fa fa-rss" style="color: #ffffff;"></i> 
                    &nbsp;&nbsp;News</span>
                </div>                          
            </ons-list-item>

<!-- 2-->
            <ons-list-item modifier="chevron" class="index-item">
                <div id="homecalendar">
                    <span class="index-item-title"><i class="fa fa-calendar" style="color: #ffffff;"></i> 
                    &nbsp;&nbsp;Calendar        
                    </span>
                </div>                                        
            </ons-list-item>

<!-- 3-->    
            <ons-list-item modifier="chevron" class="index-item">
                <div id="homelibrary">
                    <span class="index-item-title"><i class="fa fa-book" style="color: #ffffff;"></i> 
                    &nbsp;&nbsp;Library
                    </span>
                </div>                                        
            </ons-list-item>

<!-- 4-->    
            <ons-list-item modifier="chevron" class="index-item">
                <div id="homelinks">
                    <span class="index-item-title"><i class="fa fa-globe fa-lg" style="color: #ffffff;"></i>
                    &nbsp;Web&Links
                    </span>
                </div>
            </ons-list-item>
            
        </ons-list>
    </ons-page>
</body>

</html>