Monaca creates a member registration page using AngularJS + Onsenui.
I'd like to put ons-tabbar in ons-navigator and change the page for each input item.
Since we want to check the input for each page input, if we press the OK button after input, we will call the function instead of page transition, enter the data in Localstrage, and if there is no problem with input, we want to transition the page.
I originally created it without using tabbar, but I wanted to clarify the creation step and return to each step before the final confirmation, so I was not sure where it was being reworked.

<ons-navigator var = "myNavigator">
        <ons-page ng-controller = "pageCtrl as pctrl">
           <ons-toolbar>
               {{pctrl.title}} 
            </ons-toolbar>
            <ons-tabbar position = "top">
                <ons-tab page = "step1.html" label = "Step1" icon = "walking" active></ons-tab>
                <ons-tab page = "step2.html" label = "Step2" icon = "walking"></ons-tab>
                <ons-tab page = "step3.html" label = "Step3" icon = "walking"></ons-tab>
                <ons-tab page = "step4.html" label = "Step4" icon = "walking"></ons-tab>
            </ons-tabbar>
        </ons-page>
    </ons-navigator>
    <!-Step1: Nickname input screen->
    <ons-template>
        <ons-page ons-show = "pctrl.title = 'Enter nickname'">
            
              
              <form>
              
                <p style = "font-size: 25pt;color: # 1028fd;text-align: center;line-height: 70px;">Registration</p>
                <p style = "font-size: 15pt;text-align: center;">Please choose a nickname</p>
                
                   <ons-input modifier = "underbar" placeholder = "Nickroom: 10 characters or less is recommended" name = "NickNameBox"></ons-input>
                  <i aria-hidden = "true"></i>
                
                <ons-button onclick = "localStorageSetItem ();" required><center>OK</center></ons-button>
                <input type = "button" value = "back" onClick = "location.href = 'index.html'">
              
              </form>
              
            </ons-page>
    </ons-template>
    <!-Step2: Date of birth input screen->
    <ons-template>
        <ons-page ons-show = "pctrl.title = 'Birth date'">
            
                
                
            
        </ons-page>
    </ons-template>

<script>
    // Module definition
    var myApp = ons.bootstrap ('myApp', []);
    / **
     * Screen transition controller
     * /
    myApp.controller ('pageCtrl', function () {
        // get the tab bar
        var tabbar = document.querySelector ("ons-tabbar");
        // Go to the first tab
        this.changeStep1Tab = function () {
            tabbar.setActiveTab (0);
        };
        // Go to the second tab
        this.changeStep2Tab = function () {
            tabbar.setActiveTab (1);
        }
        // Go to the third tab
        this.changeStep3Tab = function () {
            tabbar.setActiveTab (2);
        }
        // Go to the fourth tab
        this.changeStep4Tab = function () {
            tabbar.setActiveTab (3);
        }
    });</script>
<script>
        var KEY = "NickName";
        // Set local storage.
        function localStorageSetItem () {
          if (document.getElementById ("NickNameBox"). value == "") {
            alert ("Nickname has not been entered")
          } else {
            localStorage.setItem (KEY, JSON.stringify (document.getElementById ("NickNameBox"). value));
            location.href = 'step2.html';
          }
        }
</script>

What you do n’t understand

I want to make a transition within a page after confirming the input with the function localStorageSetItem () (nickname), but in the current code, it transitions to EntryPage2.html in another file.
Is it possible to operate onsenui from within a function with Anglarjs?

Applicable source code

<ons-button onclick = "localStorageSetItem ();">OK</ons-button>

function localStorageSetItem () {
            // ※ I want to write a code that performs transition (step2.html) in the page
          }

without function

<ons-tabbar position = "top">
                <ons-tab page = "step1.html" label = "Step1" icon = "walking" active></ons-tab>
                <ons-tab page = "step2.html" label = "Step2" icon = "walking"></ons-tab>
            </ons-tabbar>

Now we have a transition.

Tell me how to perform page transition by performing onsenui operation in Anglarjs from within the function.
Thank you in advance.

Added (November 24, 2019)
Replace location.href = 'step2.html';
myNavigator.bringPageTop ("step2.html");or myNavigator.pushPage ("step2.html");
After changing to, the transition was made, but the tabbar disappeared.
I would like a way to make a transition while leaving the tabbar.