ng-click image not calling onsen template page in owl carousel slider

Question

I have owl carousel slider and am calling API for page content which am calling on image on click,
and also calling onsen template page using ng-click on image but it works only in first image,
in 2nd ,3rd ...... image click not call that onsen-ui template page.
Here is java script function

function product_list(slug)
            {
                alert(slug);
//              $('.please_wait').show();

                $.ajax({
                    type: 'GET',
                    url: 'http://test.com/api/get_page/',
                    data: {slug: slug},
                    dataType: 'jsonp',
                    success: function (response)
                    {
                        alert(response);
                        var obj = JSON.stringify(response);
                        obj1 = JSON.parse(obj);                        
                        var title=obj1.page.title;
                        alert(title);                        
                        var content = obj1.page.content;
                        alert(content);
                        $('#' + slug).html(content);
//                        $('.please_wait').hide();
                    },
                    error: function () {

                    },
                });
            }                   

Here is my css code

.please_wait {
                background: #fff url("img/loader.gif") no-repeat scroll center center;
                color: #ffffff;
                display: none;
                height: 100%;
                opacity: 0.7;
                position: fixed;
                text-align: center;
                vertical-align: middle;
                width: 100%;
                z-index: 9999;
            }
            #owl-demo .item{
                margin: 3px;
            }
            #owl-demo .item img{
                display: block;
                width: 100%;
                height: 300px;
            }
            @media (max-width:480px){
                .content img,.content iframe {
                    height: 200px;
                    width: 100% !important;
                }
            }
            @media (max-width:360px){
                .content img,.content iframe {
                    height: 180px;
                    width: 100%;
                }
            }             

Here is html code

<div id="content" class="content">
                <div id="owl-demo">
                    <ul><li class="item"><img src="img/slides/slide1.jpg" alt="Owl Image" onclick="product_list('education');" ng-click="menu.setMainPage('education.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide2.jpg" alt="Owl Image" onclick="product_list('wealth');" ng-click="app.navi.pushPage('wealth.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide3.jpg" alt="Owl Image" onclick="product_list('education');" ng-click="menu.setMainPage('education.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide4.jpg" alt="Owl Image" onclick="product_list('education');" ng-click="menu.setMainPage('education.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide5.jpg" alt="Owl Image" onclick="product_list('health');" ng-click="menu.setMainPage('health.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide6.jpg" alt="Owl Image" onclick="product_list('urban');" ng-click="menu.setMainPage('urban.html')"></li></ul>
                    <ul><li class="item"><img src="img/slides/slide7.jpg" alt="Owl Image" onclick="product_list('urban');" ng-click="menu.setMainPage('urban.html')"></li></ul>                                
                </div>
            </div>
            <script>
                $("#owl-demo").owlCarousel({
                    autoPlay: 3000, //Set AutoPlay to 3 seconds
                    items: 1,
                    itemsDesktop: [1199, 3],
                    itemsDesktopSmall: [979, 3]
                });
                function reload() {
                    location.reload();
                }
            </script>

I want to call page of onsen on image click and pass content of page from api using javascript.

Thanks.

Answer 1

<ons-navigator var="Navigator">
<div id="content" class="content">
                <div id="owl-demo">
                    <li class="item"><img src="img/slides/slide1.jpg" alt="Owl Image" onclick="product_list('health'); Navigator.pushPage('health.html');"></li>
                    <li class="item"><img src="img/slides/slide2.jpg" alt="Owl Image" onclick="product_list('wealth'); Navigator.pushPage('wealth.html');" ></li>
                    <li class="item"><img src="img/slides/slide3.jpg" alt="Owl Image" onclick="product_list('education'); Navigator.pushPage('education.html');"></li>
                    <li class="item"><img src="img/slides/slide4.jpg" alt="Owl Image" onclick="product_list('education'); Navigator.pushPage('education.html');">
                    <li class="item"><img src="img/slides/slide5.jpg" alt="Owl Image" onclick="product_list('health'); Navigator.pushPage('health.html');" ></li>
                    <li class="item"><img src="img/slides/slide6.jpg" alt="Owl Image" onclick="product_list('urban'); Navigator.pushPage('urban.html');" ></li>
                    <li class="item"><img src="img/slides/slide7.jpg" alt="Owl Image" onclick="product_list('urban'); Navigator.pushPage('urban.html');" ></li>                                
                </div>
            </div>         
    <script>
                    $("#owl-demo").owlCarousel({
                        autoPlay: 3000, //Set AutoPlay to 3 seconds
                        items: 1,
                        itemsDesktop: [1199, 3],
                        itemsDesktopSmall: [979, 3]
                    });
                    function reload() {
                        location.reload();
                    }
                </script>
    <ons-template id="education.html">
            <ons-page style="background-color: #FFFFCC;">
                <ons-toolbar>
                    <div class="left">
                        <ons-toolbar-button ng-click="menu.openMenu();">
                            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                        </ons-toolbar-button>
                    </div>
                    <div class="center">Education</div>
                </ons-toolbar>            

                <div id="education" class="content">
                    <div class="footer-text"><label>Copyright @ 2016</label></div>
                </div>            
            </ons-page>
        </ons-template>            

use ons navigator.