AngularJS - ng-switch and primitive

HTML

<span>in app, outside controller</span>
<div ng-controller="LoginCheckCtrl">
    <span>inside main div</span>
   <div ng-switch on="loginData"> 
       <span>inside switch div<span>
      <div ng-switch-when="false" ng-include="'login'">overwritten</div>
      <div ng-switch-when="true" ng-include="'logout'">overwritten</div>
(a) (Why is this above the Switch Divs?)
   </div>
(b)
</div>
(c)
<script type="text/ng-template" id="login">
    <button ng-click="login()">Login</button><span>each tag group </span> inside template
    <span>gets its own scope</span>
</script>

<script type="text/ng-template" id="logout">
    <button ng-click="logout()">Logout</button><span>see </span> even unwrapped text
    <span> here too </span>
</script>

CSS

.ng-scope{border:1px dotted red;padding:4px;}

JavaScript

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

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