title: How to easily make ionic tabs navigation
body: <p>As I recently started working with "ionic", I am facing a problem making a "tabs navigation". </p>
  
  <p>I was following a simple tutorial, I made a navigation with two tabs, but I couldn't make three tabs, it doesn't work properly, I'm afraid I didn't understand the concept of these tabs.</p>
  
  <p><a href="http://codepen.io/stranger90/pen/MwjGPY" rel="nofollow">CODEPEN CODE + DEMO</a></p>
  
  <p>Here is my awesome code :</p>
  
  <pre><code>&lt;ion-tabs class="tabs-striped tabs-top tabs-background-dark tabs-color-energized"&gt;
  
          &lt;ion-tab title="help"ui-sref="help"&gt;
             &lt;ion-nav-view name="help"&gt;&lt;/ion-nav-view&gt;
          &lt;/ion-tab&gt;
  
          &lt;ion-tab title="home" ui-sref="home"&gt;
              &lt;ion-nav-view name="home"&gt;&lt;/ion-nav-view&gt; 
          &lt;/ion-tab&gt;
  
       &lt;ion-tab title="contact" ui-sref="contact"&gt;
              &lt;ion-nav-view name="contact"&gt;&lt;/ion-nav-view&gt; 
          &lt;/ion-tab&gt;
  
  
  
      &lt;/ion-tabs&gt; 
   &lt;script type="text/ng-template" id="home.html"&gt;
    &lt;ion-view title="Home"&gt;
      &lt;ion-content padding="true"&gt;
        &lt;h2&gt;Home Page&lt;/h2&gt;
        &lt;p&gt;Here's the main route for the app.&lt;/p&gt;
      &lt;/ion-content&gt;
    &lt;/ion-view&gt;
  &lt;/script&gt;
  
  &lt;script type="text/ng-template" id="help.html"&gt;
    &lt;ion-view title="Help"&gt;
      &lt;ion-content padding="true"&gt;
         &lt;h2&gt;Using the app&lt;/h2&gt;
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?&lt;/p&gt;
      &lt;/ion-content&gt;
    &lt;/ion-view&gt;
  &lt;/script&gt;
  
        &lt;script type="text/ng-template" id="contact.html"&gt;
    &lt;ion-view title="Contact"&gt;
      &lt;ion-content padding="true"&gt;
         &lt;h2&gt;Using the app&lt;/h2&gt;
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?&lt;/p&gt;
      &lt;/ion-content&gt;
    &lt;/ion-view&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>app.js : </p>
  
  <pre><code>.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/')
  
  $stateProvider
      .state('home', {
    url: '/home',
    views: {
      home: {
        templateUrl: 'home.html'
      }
    }
  })
  
   .state('help', {
    url: '/help',
    views: {
      help: {
        templateUrl: 'help.html'
      }
    }
  })
  
  .state('contact', {
    url: '/contact',
    views: {
      help: {
        templateUrl: 'contact.html'
      }
    }
  })
  
  
  })
  </code></pre>
  
  <p><a href="http://codepen.io/stranger90/pen/MwjGPY" rel="nofollow">http://codepen.io/stranger90/pen/MwjGPY</a></p>