How to combine splitter with tabbar?

[wetfeet]

I am trying to make an interface that has both the splitter and also a persistent tabbar at the bottom to navigate to the 3 to 5 common sections. The splitter side menu will have a long list of all pages. The tabbar only has the top 3 to 5 pages for quick access convenience.

So I tried to combine both the tabs and splitter sample project. The only dfference is in the index.html file.

I added the page1.html and page2.html in tabs project into the splitter project. The first page to be loaded remains as home.html as taken from the splitter project.

<ons-splitter ng-controller="AppController as app" var="splitter">
    <ons-splitter-side side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-item ng-click="app.load('home.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item ng-click="app.load('settings.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item ng-click="app.load('about.html')" tappable>
            About
          </ons-list-item>
          <ons-list-item ng-click="app.load('page1.html')" tappable>
            Page 1
          </ons-list-item>
          <ons-list-item ng-click="app.load('page2.html')" tappable>
            Page 2
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content page="home.html"></ons-splitter-content>
  </ons-splitter>

Then for each page, I add in the tabbar after the toolbar similar to tabs project. For example, the home.html page is given as below.

<ons-template id="home.html">
    <ons-page ons-show="app.title = 'Home'">
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="app.toggle()">
            <ons-icon icon="md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main
        </div>
      </ons-toolbar>

      <ons-tabbar position="auto">
        <ons-tab page="home.html" label="Home" icon="square" active></ons-tab>
        <ons-tab page="settings.html" label="Settings" icon="square"></ons-tab>
        <ons-tab page="about.html" label="About" icon="square"></ons-tab>
        <ons-tab page="page1.html" label="Page 1" icon="square"></ons-tab>
        <ons-tab page="page2.html" label="Page 2" icon="square"></ons-tab>
      </ons-tabbar>

      <div class="content" style="text-align: center">
        <p>Home content</p>

        <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
          Swipe right to open the menu!
        </p>
      </div>
    </ons-page>
  </ons-template>

I duplicated the the tabbar for each page, and switching the active attribute accordingly. Not an elegant solution by repeating this block, but I try to follow as closely the tabs project as possible.

But when loaded into the Chrome browser, it sort of hang. The web browser never seems to finish initializing the web page and was sort of stuck in some infinite loop.

Once I comment out the tabbar block, it works fine again.

• Has anyone tried combining splitter and tabbar together before?
• Is Onsen UI designed for this? I believe navigator can be combined with splitter or tabbar. But can we combine splitter and tabbar?
• Did I miss out anything?

Thanks.