Shaping up with Angular.js

by Can

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div ng-app>
    <section>
        <ul class="nav nav-pills" ng-init="tab = 1">
            <li ng-class="{ active:tab===1 }"><a ng-click="tab = 1">Description</a></li>
            <li ng-class="{ active:tab===2 }"><a ng-click="tab = 2">Specifications</a></li>
            <li ng-class="{ active:tab===3 }"><a ng-click="tab = 3">Reviews</a></li>
        </ul>
        {{tab}}
    </section>
    <section>
        <div class="panel" ng-show="tab === 1">
            <h4>Description</h4>
        </div>
        <div class="panel" ng-show="tab === 2">
            <h4>Specifications</h4>
        </div>
        <div class="panel" ng-show="tab === 3">
            <h4>Reviews</h4>
        </div>
    </section>
</div>

CSS

body {
    background: whitesmoke
}