html5 template-element AngularJS - html

Question

Im experimenting with template elements and Angular.
<template id="loginTemplate">
<div id="login" class="menuTop menu top" data-ng-controller="loginCtrl">
<form class="form-inline text-center" id="loginForm" data-ng-submit="login()">
<input type="email" class="input-big" placeholder="Email" data-ng-model="loginEmail">
<input type="password" class="input-mini" placeholder="Password" data-ng-model="loginPass">
<input type="text" class="input-small" placeholder="Display name" data-ng-model="loginName" data-ng-show="register">
<button type="submit" class="btn-small">Sign in</button>
<button type="button" class="btn-small" data-ng-hide="register" data-ng-click="register=true">Register</button>
</form>
</div>
</template>
JS:
(function init(){
"use strict";
var loginTemplate = document.querySelector("#loginTemplate").content;
document.body.appendChild(loginTemplate.cloneNode(true));
return;
})();
This works great in rendering my Angular controller data on init.
However when I want to conditionally load the next template it doesn't work.
<template id="menuTemplate">
<div id="menu" class="menuTop menu top" data-ng-controller="menuCtrl">
{{ time.now }}
</div>
</template>
JS:
socket.on("logon", function ( data ){
//this fails
$scope.user.name = data.userName;
var menuTemplate = document.querySelector("#menuTemplate").content;
document.body.removeChild(document.getElementById("login"));
document.body.appendChild(menuTemplate.cloneNode(true));
}
This will show me the {{ variables }}.
Loading this menuTemplate first makes it work, but loading it conditionally doesn't.
Maybe Angular doesn't support template-elements, as they have said support will be available in 2.0, but initial load works so maybe someone has it working elsewhere?
Maybe the .clonenode breaks the angular link when performed after load? I dont know.
edit:Have a fiddle but have been unable to make it work as it does in chrome canary.
http://jsfiddle.net/CSK8n/