Почему не работает bottom_bar?

Всем здраствуйте! Помогите пожалуйста с проблемой! При нажатии на кнопки bottom_bar контент не меняется.

<ons-page>
  <ons-toolbar>
    <div class="center" style="text-align: center;">Tab 1</div>
  </ons-toolbar>
    <ons-tabbar swipeable position="auto">
      <ons-tab page="tab1.html" label="Tab 1" active>
      </ons-tab>
      <ons-tab page="tab2.html" label="Tab 2" active-icon="md-face">
      </ons-tab>
      <ons-tab page="tab3.html" label="Tab 3" active-icon="md-face">
    </ons-tab>
    </ons-tabbar>
  </ons-page>
  
  <template id="tab1.html">
    <ons-page id="Tab1">
      <p style="text-align: center;">
        Tab 1
      </p>
    </ons-page>
  </template>
  
  <template id="tab2.html">
    <ons-page id="Tab2">
      <p style="text-align: center;">
        Tab 2
      </p>
    </ons-page>
  </template>

  <template id="tab3.html">
    <ons-page id="Tab3">
      <p style="text-align: center;">
       Tab 3
      </p>
    </ons-page>
  </template>

  
    <ons-bottom-toolbar>
      <ons-tabbar position="auto">
        <ons-tab page="tab4.html" label="Tab 4" class="tables">
        </ons-tab>
        <ons-tab page="tab5.html" label="Tab 5" class="orders">
        </ons-tab>
        <ons-tab page="tab6.html" label="Tab 6" class="orders">
        </ons-tab>
      </ons-tabbar>
    </ons-bottom-toolbar>
    
    <template id="tab4.html">
      <ons-page id="Tab4">
        <p style="text-align: center;">
          Tab 4
        </p>
      </ons-page>
    </template>

    <template id="tab5.html">
      <ons-page id="Tab5">
        <p style="text-align: center;">
          Tab 5
        </p>
      </ons-page>
    </template>

    <template id="tab6.html">
      <ons-page id="Tab6">
        <p style="text-align: center;">
          Tab 6
        </p>
      </ons-page>
    </template>