var app = angular.module('myApp',[]);
<div ng-init="tab=1"> <ul> <li class="tab" ng-class="{active:tab==1}"> <a href ng-click="tab = 1">Tab 1</a> </li> <li class="tab" ng-class="{active:tab==2}"> <a href ng-click="tab = 2">Tab 2</a> </li> <li class="tab" ng-class="{active:tab==3}"> <a href ng-click="tab = 3">Tab 3</a> </li> </<ul> <p class="tab-content" ng-show="tab==1">Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> <p class="tab-content" ng-show="tab==2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p> <p class="tab-content" ng-show="tab==3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p> </div>
*{ font-family: Arial; font-size: 13px; line-height: 140%; } h3.tab{ margin: 0; } ul{ overflow:hidden; margin: 0; padding: 0; } li{ display:inline-block; } li a{ padding: 10px 15px; background: #ddd; color: #333; text-decoration: none; font-weight: bold; display:block; } .tab-content{ border: 1px solid #ddd; padding: 10px; margin:0 }