AngularJS: How to dynamically initialize a controller in a template from within another controller

Question

I would like ChildCtrl to be initialized only when the button above it is clicked. how is that possible?

<div ng-controller="ParentCtrl">
    <button>CLICK TO INIT CHILD CTRL</button>
    <div class="child-container">
        <div ng-controller="ChildCtrl" ng-include="'templates/child.html'" />
    </div>
</div>

Answer 1

That is easy, use ng-if:

<div ng-controller="ParentCtrl">
    <button ng-click='loadChild=true'>CLICK TO INIT CHILD CTRL</button>
    <div class="child-container" ng-if='loadChild'>
        <div ng-controller="ChildCtrl" ng-include="'templates/child.html'" />
    </div>
</div>

ng-if directive does not load the DOM unless the expression is true.