ng-click在JavaScript添加HTML时不响应

Question

ng-click无法正常工作。我尝试查看文档和教程，但找不到原因。

我有一个存储HTML模板的JavaScript变量。通过使用

document.getElementById('someId').innerHTML = emptypage;

其中emptypage是一个JavaScript变量，是在具有id = someId的div中实现的。

我的代码：

var emptypage=` <md-toolbar `+ this.createID() +` class="md-accent 
 soopsObject" ng-app="vdApp">
        <span class="example-spacer ng-controller="vdNav">
            <md-sidenav class="md-sidenav-left" md-component-id="left" md- 
             disable-backdrop md-whiteframe="4">
                <md-content layout-margin>
                    <p>
                        About
                    </p>
                    <p>
                        Contact
                    </p>
                    <md-button ng-click="toggleLeft()" class="md-accent">
                        Close
                    </md-button>
                </md-content>
            </md-sidenav>
            <div>
                <md-button ng-click="toggleLeft()">
                    <md-icon>menu</md-icon> Menu
                </md-button>
            </div>
    </span>         
    </md-toolbar>`;

我的控制器：

    var nav=angular.module("vdApp", []);
    nav.controller("vdNav", function($scope, $mdSidenav) {
    alert("inside leftToggle");

    $scope.toggleLeft = buildToggler('left');

    function buildToggler(componentId){
        return function(){
            $mdSidenav(componentId).toggle();
        };
    }
});

即使警报也不起作用。 我究竟做错了什么？任何帮助或建议，表示赞赏。