Open page within current page using onsen ui segment control

I am using Segment control in my App but I am unable to switch between the segments.

I am referring this link https://onsen.io/pattern-schedule.html

I have tried and also searched a lot but cant find any solution.

My Output :

My Code :

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"/>
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="css/onsenui.css">
<link rel="stylesheet" href="css/onsen-css-components.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/angular/angular.js"></script>
 <script src="js/angular/angular.min.js"></script>
<script src="js/onsenui.js"></script> 
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>js"></script>

</head>
<script>
   ons.bootstrap();
</script>
<body>

<ons-navigator animation="slide" title="Navigator" var="menu">
 <ons-page var ="variable">
    <ons-toolbar>
      <div class="left">
      </div>
      <div class="center">
        Menu
      </div>
      <div class="right">
        <ons-toolbar-button>
          <ons-icon icon="ion-plus" fixed-width="false" style="vertical-  
             align: -4px;"></ons-icon>
        </ons-toolbar-button>
      </div>
    </ons-toolbar>


  <div class="navigation-bar">
      <div class="navigation-bar__center">


        <div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">

          <div class="button-bar__item" ngclick="menu.setMainPage('indian.html')">
            <input type="radio" name="navi-segment-a" checked>
            <div class="button-bar__button">Indian</div>
          </div>

          <div class="button-bar__item" ngclick="menu.setMainPage('english.html')">
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">English</div>
          </div>

           <div class="button-bar__item" ngclick="menu.setMainPage('drinks.html')"> 
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">Drinks</div>
          </div>

        </div>

      </div>
 </div>

 </ons-page>
</ons-navigator>

<ons-template id="indian.html">

 <ons-page>
  <div>
    Hello, this is the content of drinks.html
  </div>
 </ons-page>
</ons-template>

<ons-template id="english.html">

<ons-page>
 <div>
   Hello, this is the content of drinks.html
 </div>
</ons-page>
</ons-template>

<ons-template id="drinks.html">
<ons-page>
 <div>
   Hello, this is the content of drinks.html
 </div>
</ons-page>
</ons-template>

Thanks in Advance.

Edit :

My requirements is that I want to open the templates i.e indian.html ,english.html and drinks.html within the same page on segment control click respectively like the splitview does

I am using Onsen 1

I am not using Sliding menu.

Update:I am now getting this Error...

 04-11 04:58:06.471 14813-14851/com.hogo.onsenui E/AndroidProtocolHandler:    
 Unable to open asset URL: file:///android_asset/www/english.html
 04-11 04:58:06.501 14813-14813/com.hogo.onsenui I/chromium:   
 [INFO:CONSOLE(108)] "Error: Page is not found: english.html
                                                            at  
  file:///android_asset/www/js/onsenui.js:13828:17
                                                            at  
  file:///android_asset/www/js/angular/angular.min.js:120:182
                                                            at n.$eval  
  (file:///android_asset/www/js/angular/angular.min.js:134:493)
                                                            at n.$digest 

  (file:///android_asset/www/js/angular/angular.min.js:132:9)
                                                            at n.$apply 
  (file:///android_asset/www/js/angular/angular.min.js:135:269)
                                                            at l 
  (file:///android_asset/www/js/angular/angular.min.js:87:152)
                                                            at F 
  (file:///android_asset/www/js/angular/angular.min.js:91:187)
                                                            at 
   XMLHttpRequest.e  
   (file:///android_asset/www/js/angular/angular.min.js:92:271)", source: 
   file:///android_asset/www/js/angular/angular.min.js (108)

Updated Code :

 <body>
   <ons-tabbar var="navi" position="top">
   <ons-tab page="indian.html" active="true"></ons-tab>
   <ons-tab page="english.html"></ons-tab>
   <ons-tab page="drinks.html"></ons-tab>
   </ons-tabbar>


<ons-toolbar>
      <div class="left">
      </div>
      <div class="center">
        Menu
      </div>
      <div class="right">
        <ons-toolbar-button>
          <ons-icon icon="ion-plus" fixed-width="false" style="vertical-  
                align: -4px;"></ons-icon>
        </ons-toolbar-button>
      </div>
  </ons-toolbar>

 <ons-page>
    <div class="navigation-bar">
      <div class="navigation-bar__center">

        <div class="button-bar" style="width:100%;right:8px; margin:8px; 
             padding: 0px 5px;">

          <div class="button-bar__item" ng-click="navi.setActiveTab(0)">
            <input type="radio" name="navi-segment-a" checked>
            <div class="button-bar__button">Indian</div>
          </div>

          <div class="button-bar__item" ng-click="navi.setActiveTab(1)">
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">English</div>
          </div>

           <div class="button-bar__item" ng-click="navi.setActiveTab(2)"> 
            <input type="radio" name="navi-segment-a">
            <div class="button-bar__button">Drinks</div>
          </div>

          </div>

         </div>
       </div>
    </ons-page>


<ons-template id="indian.html">

 <ons-page>

  <p style="text-align: center; color: #999; padding-top: 100px;">
    english Contents
  </p>
   </ons-page>

 </ons-template>

<ons-template id="english.html">

  <ons-page>

  <p style="text-align: center; color: #999; padding-top: 100px;">
    english Contents
  </p>
  </ons-page>

 </ons-template>

<ons-template id="drinks.html">

  <ons-page>

  <p style="text-align: center; color: #999; padding-top: 100px;">
    drinks Contents
  </p>
  </ons-page>

 </ons-template>

  </body>

I have hide the tabbar in my css page

Solution

There are several issues which may be preventing the program from working:

You are including angular twice
```
<script src="js/angular/angular.js"></script>
<script src="js/angular/angular.min.js"></script>
```
It's probably not the cause of your problem, but it may cause other issues - only one of the two files is enough.
```
<script type="text/javascript" src="js/index.js"></script>js"></script>
```
This also shouldn't be a problem, but tags like this may cause issues - when you have extra closing tags it's fine, but if you had an extra open tag then the whole page could be blank.
The attributes should be ng-click, not ngclick.
If you want to use the ons-navigator then the methods you have available are pushPage, popPage, replacePage. The setMainPage method which you're using is a method of the ons-sliding-menu.

If you want to have data filtered then you should:

Add ng-controller="AppController" to the body or some other parent element.
Add ng-model="a" to the radio buttons (and i guess some values).
Add the items to the $scope in the controller.
Add ng-repeat="item in items | filter: { category: category }" or something similar

So something like:

<div class="navigation-bar">
  <div class="navigation-bar__center">
    <div class="button-bar" style="width:100%;right:8px; margin:8px; padding: 0px 5px;">
      <div class="button-bar__item">
        <input type="radio" name="navi-segment-a" ng-model="a" value="indian" checked>
        <div class="button-bar__button">Indian</div>
      </div>
      <div class="button-bar__item">
        <input type="radio" name="navi-segment-a" ng-model="a" value="english">
        <div class="button-bar__button">English</div>
      </div>
       <div class="button-bar__item"> 
        <input type="radio" name="navi-segment-a" ng-model="a" value="drinks">
        <div class="button-bar__button">Drinks</div>
      </div>
    </div>
  </div>
</div>

<ons-list ng-repeat="item in items | filter: { category: category }">
    <ons-list-item>{{item.name}} ...</ons-list-item>
</ons-list>

And for javascript:

ons.bootstrap().controller('AppController', function ($scope) {
  $scope.a = "indian";
  $scope.items = [ // put your items here
    name: 'item 1', category: 'indian',
    name: 'item 2', category: 'indian',
    name: 'item 3', category: 'english',
    name: 'item 4', category: 'english',
    name: 'item 5', category: 'drinks',
    name: 'item 6', category: 'drinks'
  ]
});

Update: I thought you wanted filtering. I'll leave the previous answer if anyone else is interested in it. And now the answer to the updated question:

What you seem to want in that case is exactly the functionality of ons-tabbar - you have tabs and tab contents - exactly what you seem to want. So you just want to have different styles for the tabs.

However styling them in that way may not be trivial and moreover the styles may break if you try to update the version. So instead I'll provide 2 other solutions, which don't require advanced css tricks:

Use a tabbar, but just hide it and link the actions from your segment control:

<div class="button-bar">
  <div class="button-bar__item" ng-click="navi.setActiveTab(0)">
    <input type="radio" name="navi-segment-a" checked>
    <div class="button-bar__button">Indian</div>
  </div>
  ...
  <div class="button-bar__item" ng-click="navi.setActiveTab(2)">
    <input type="radio" name="navi-segment-a">
    <div class="button-bar__button">Drinks</div>
  </div>
</div>

<ons-tabbar var="navi" position="top">
  <ons-tab page="indian.html" active="true"></ons-tab>
  <ons-tab page="english.html"></ons-tab>
  <ons-tab page="drinks.html"></ons-tab>
</ons-tabbar>

CSS: #navi .tab-bar { display: none; }

Just use the navigator if you want to change the pages.
- <ons-navigator page="indian.html" id="navi"></ons-navigator>
- Add ng-click="navi.replacePage('pagename.html')" to the .button-bar__items
- Add some distance on the top side of the navigator #navi { top: 40px; }