<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="" ng-init="tab = 'tab1'">
    <div id="tab">
      <ul class="tab">
        <li ng-class="{active: tab == 'tab1'}">
          <a href="#" ng-click="tab = 'tab1'">1. tab</a>
        </li>
        <li ng-class="{active: tab == 'tab2'}">
          <a href="#" ng-click="tab = 'tab2'">2. tab</a>
        </li>
        <li ng-class="{active: tab == 'tab3'}">
          <a href="#" ng-click="tab = 'tab3'">3. tab</a>
        </li>
      </ul>
      <div ng-switch="tab">
        <div class="tab-content" ng-switch-when="tab1">
				1. tab içeriği
			</div>
        <div class="tab-content" ng-switch-when="tab2">
				2. tab içeriği
			</div>
        <div class="tab-content" ng-switch-when="tab3">
				3. tab içeriği
			</div>
      </div>
    </div>
  </body>

</html>
* { padding: 0; margin: 0; list-style: none; }
#tab {
	margin: 20px;
	width: 400px;
}
ul.tab {
	overflow: hidden;
	border: 1px solid #ddd;
}
ul.tab li {
	float: left;
	border-right: 1px solid #ddd;
}
ul.tab li a {
	display: block;
	padding: 8px 15px;
	font-size: 14px;
	color: #444;
	text-decoration: none;
}
ul.tab li.active {
	background-color: #eee;
}
.tab-content {
	padding: 10px;
	line-height: 20px;
	font-size: 14px;
	color: #333;
	border: 1px solid #ddd;
	border-top: none;
}