関数内からonsenuiの操作をAnglarjsで行い、ページ遷移する方法を教えてください。

Question

前提・実現したいこと

MonacaでAngularJS+Onsenuiを利用して会員登録ページを作成しています。
ons-navigator内にons-tabbarを入れて入力項目ごとにページを遷移してたいと考えております。
1ページ入力ごとに入力確認をしたいので、入力後にＯＫボタンを押したらページ遷移でなく、関数を呼び出し、Localstrageにデータを入力して、入力に問題なければページを遷移したいと考えております。
当初tabbarを利用しないで作成していたのですが、作成ステップを明確化したいのと最終確認前に各Stepに戻れるようにしたいと思い、作り直しているところでわからなくなってしまいました。

    <ons-navigator var="myNavigator">
        <ons-page ng-controller="pageCtrl as pctrl">
           <ons-toolbar id="toolbar">
              <div class="center">{{pctrl.title}}</div>
            </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:ニックネーム入力画面 -->
    <ons-template id="step1.html">
        <ons-page id="Step1Page" ons-show="pctrl.title = 'ニックネーム入力'">
            <div class="content" ng-app="myApp">
              <div class="main">
              <form>
              <div class="box02" style="position: absolute; left: 5%; top: 10%;">
                <p style ="font-size:25pt;color: #1028fd;text-align:center;line-height:70px;">利用登録</p>
                <p style ="font-size:15pt;text-align:center;">ニックネームを決めてください</p>
                <div class="cp_iptxt" style="position: absolute; left: 5%; top: 30%;">
                   <ons-input id="NickNameBox" modifier="underbar" placeholder="ﾆｯｸﾈｰﾑ:10文字以内推奨" name="NickNameBox" style="font-size:14pt;"></ons-input>
                  <i class="fa fa-user fa-lg fa-fw" aria-hidden="true"></i>
                </div>

                <ons-button onclick="localStorageSetItem();" class="btn-all-radius" style="position: absolute; left: 10%; top: 70%" required><center>OK</center></ons-button>
                <input type="button" value="戻る" onClick="location.href='index.html'" class="btn-all-radius" style="position: absolute; left: 55%; top: 70%">
              </div>
              </form>
              </div>
            </div>
        </ons-page>
    </ons-template>

    <!-- Step2:生年月日入力画面 -->
    <ons-template id="step2.html">
        <ons-page id="Step2Page" ons-show="pctrl.title = '生年月日'">
            <div class="content" ng-app="myApp">
                <div class="main">
                </div>
            </div>
        </ons-page>
    </ons-template>

<script>
    // モジュールの定義
    var myApp = ons.bootstrap('myApp',[]);
    /**
     * 画面遷移用コントローラ
     */ 
    myApp.controller('pageCtrl', function() {
        // タブバーを取得
        var tabbar = document.querySelector("ons-tabbar");
        // 1つ目のタブへ遷移
        this.changeStep1Tab = function(){
            tabbar.setActiveTab(0);
        };
        // 2つ目のタブへ遷移
        this.changeStep2Tab = function(){
            tabbar.setActiveTab(1);
        }
        // 3つ目のタブへ遷移
        this.changeStep3Tab = function(){
            tabbar.setActiveTab(2);
        }
        // 4つ目のタブへ遷移
        this.changeStep4Tab = function(){
            tabbar.setActiveTab(3);
        }
    });
</script>
<script>
        var KEY = "NickName";
        // ローカルストレージをセットします。
        function localStorageSetItem() {
          if(document.getElementById("NickNameBox").value==""){
            alert("ニックネームが入力されていません")
          }else{
            localStorage.setItem(KEY, JSON.stringify(document.getElementById("NickNameBox").value));
            location.href = 'step2.html';
          }
        }
</script>

わからないこと

関数localStorageSetItem()で入力確認後（ニックネーム）にページ内遷移を行いたいのですが、現在のコードでは別ファイルのEntryPage2.htmlに遷移するようになっています。
関数内からonsenuiの操作をAnglarjsで行うことはできるのでしょうか？

該当のソースコード

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

        function localStorageSetItem() {
            //※ここでページ内遷移(step2.html)をするコードが書きたい
          }

関数を使用ない場合の

            <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>

では遷移ができています。

関数内からonsenuiの操作をAnglarjsで行い、ページ遷移する方法を教えてください。
よろしくお願い致します。

追記（2019/11/24）
location.href = 'step2.html';の部分を
myNavigator.bringPageTop("step2.html");やmyNavigator.pushPage("step2.html");
に変更したら遷移はできましたが、tabbarが消えてしまいました。
tabbarを残したまま遷移する方法をお願いします。

Answer 1

こちらの質問を参考にしたらできました！