html - html5 テンプレート要素 AngularJS

Question

テンプレート要素と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;
})();

これは、init で Angular コントローラー データをレンダリングする際にうまく機能します。ただし、次のテンプレートを条件付きでロードしたい場合は機能しません。

<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));
}

これにより、{{変数}}が表示されます。この menuTemplate を最初にロードすると機能しますが、条件付きでロードすると機能しません。Angular は 2.0 でサポートが利用可能になると述べているため、テンプレート要素をサポートしていない可能性がありますが、初期ロードが機能するため、誰かが他の場所で機能している可能性がありますか? ロード後に実行すると、.clonenode が角度リンクを壊すのではないでしょうか? 知らない。

編集：フィドルがありますが、クロムカナリアのように機能させることができませんでした. http://jsfiddle.net/CSK8n/