AngularJS+UI Bootstrap: Simple Tabs

Simple tabs by AngularJS and UI Bootstrap.

by beltiste

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/1.0.8/angular.min.js"></script>
<script src="https://raw.github.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-0.6.0.min.js"></script>
    <body ng-controller="MainCtrl">
    <p>Good {{timeOfDay}}, {{name}}!</p>
    <div ng-controller="ChildCtrl">
    <p>Good {{timeOfDay}}, {{name}}!</p>
    <p ng-controller="BabyCtrl">Good {{timeOfDay}}, {{name}}!</p>
    </div>
    </body>

JavaScript

function MainCtrl($scope) {
    $scope.timeOfDay = 'morning';
    $scope.name = 'Nikki';
    }
     
    function ChildCtrl($scope) {
    $scope.name = 'Mattie';
    }
     
    function BabyCtrl($scope) {
    $scope.timeOfDay = 'evening';
    $scope.name = 'Gingerbreak Baby';
    }