title: Creating tabs in AngularJs
body: <p>I'm trying to create simple tabs using only divs with ng-show and ng-hide. I don't want to use jQuery or BootStrap. I have created the tabs but I cannot handle the divs correctly.</p>
  
  <h1><a href="http://jsfiddle.net/uDw5g/" rel="nofollow"><em><kbd>JS Fiddle</kbd></em></a></h1>
  
  <pre><code>&lt;div  ng-app ng-controller="sample"&gt;
  
      &lt;div class="cb" ng-click="showDetails = ! showDetails"&gt;tab 1&lt;/div&gt;
      &lt;div class="cb" ng-click="showDetails = ! showDetails"&gt;tab 2&lt;/div&gt;
  
      &lt;div ng-hide="showDetails"&gt;
          &lt;p&gt;first&lt;/p&gt;
       &lt;/div&gt;
  
      &lt;div ng-show="showDetails"&gt;
          &lt;p&gt;second&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Even if I click the first tab displays the content of the second tab. 
  How can I display only the first content when I click the first tab and the second content when I click the second one? </p>
  
  <p>Thank you in advance.</p>