redirect to ons-template from controller

Question

I have several ons-templates in the page and every template is bound to its controller, now how to redirect from controller first to ons-template second.html upon successful ajax call, below is my code.

<ons-template id="changePass.html">
    <ons-page modifier="shop-details"  class='page_bg'>
        <ons-toolbar style="background-color: #16A500;">
            <div class="left">
                <ons-toolbar-button onclick="menu.setMainPage('userProfile.html', {closeMenu: true}), {animation: 'slide'}">
                    <ons-icon icon="ion-arrow-left-c" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Change Password</div>
        </ons-toolbar>          

        <div ng-controller="userProfile">
            <div ng-show="loading" class="loading"><img src="img/loading.gif" height="50px" width="50px"></div>
            <div class="profile-card">
                <img src="{{profiledata.profile_image_url}}" class="profile-image-settings">
                <div class="profile-name">{{profiledata.firstname}} {{profiledata.lastname}}</div>                                  
            </div><br>
            <div class="form-row">
              <input type="password" id="cpass" class="text-input--underbar width-full" placeholder="Current Password" value="">
            </div>
            <div class="form-row">
              <input type="password" id="npass" class="text-input--underbar width-full" placeholder="New Password" value="">
            </div>
            <div class="form-row">
              <input type="password" id="cnpass" class="text-input--underbar width-full" placeholder="Confirm New Password" value="">
            </div>
            <div class="form-row">
            <p style="font-size: small; color: red;">- Must be between 8 and 16 characters long.<br>
                - Must contain at least 3 of following.<br>
                - English uppercase letter (A to Z).<br>
                - English lowercase letter (a to z).<br>
                - Numerical digit (0 to 9).<br>
                - Special character (#, $, ^, etc.).  </p>
            </div>              
            <ons-bottom-toolbar modifier="transparent">
                <ons-button modifier="large" class="login-button" ng-click="changePass();">Save</ons-button>
            </ons-bottom-toolbar>
        </div>
    </ons-page>
</ons-template>

    $scope.changePass = function (){
    var cpass = document.getElementById('cpass').value;
    var npass = document.getElementById('npass').value;
    var cnpass = document.getElementById('cnpass').value;

    $.ajax({
        type: 'GET',
        url: serviceURL+'account/change_password',
        data: {user_id: user_id, authentication_key: authentication_key, current_password: cpass, new_password: npass, confirm_password: cnpass},
        timeout: 5000,
        success: function (response) {              
            alert(response);
            $scope.loading = false;
            $scope.questions = JSON.parse(response).data;
            $scope.$apply();            
        },      
        error: function (response) {
            $scope.error = true;
            $scope.$apply();
        }
    });
};

So when the ajax request successes, i want to redirect to some another ons-template lets say home.html.

Answer 1

You simply need to use pushPage for your navigator. The easiest method is:

document.getElementById('myNavID').pushPage('second.html');

For Angular, you use:

myNav.pushPage('second.html');

The reference document here, has a working example: https://onsen.io/2/reference/ons-navigator.html