JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<div ng-controller="LoginCheckCtrl">
        <div ng-switch on="user.login"> 
          <div ng-switch-when="false" ng-include="'login'"></div>
          <div ng-switch-when="true" ng-include="'logout'"></div>
        </div>
</div>

<script type="text/ng-template" id="login">
        <div ng-controller="LoginCtrl">
            <button ng-click="login()">Login</button>
        </div>
    </script>

<script type="text/ng-template" id="logout">
        <div ng-controller="LogoutCtrl">
            <button ng-click="logout()">Logout</button>
        </div>
    </script>

JavaScript

var app = angular.module('myApp', []);

function LoginCheckCtrl($scope) {
    $scope.user = {
        login: false
    };
}

function LoginCtrl($scope) {
	debugger;
    $scope.login = function() {
        console.log($scope.user.login ? 'logged in' : 'not logged in');
        $scope.user.login = true;
    };
}

function LogoutCtrl($scope) {
    $scope.logout = function() {
        console.log($scope.user.login ? 'logged in' : 'not logged in');
        $scope.user.login = false;
    };
}