AngularJS - Dynamic HTML that contains the controller code

Question

I have a AngularJS page that displays a popup. The HTML for the popup is dynamically retrieved from the server using an AJAX call. This dynamic HTML contains a new controller and the necessary AngularJS code for the controller as well. This code works only if the child page JavaScript code is present in the parent page. I would like to keep all the child page code in the child page itself.

Can someone please point out what I am doing wrong?

Main Page

    <div id="mainPage" ng-controller="mainController">
            Contains a table that displays a bunch of rows.
    </div>

    <div id="popup">
            Dynamic HTML retrieved from AJAX goes here.
    </div>

    <script type="text/javascript">
            angularMainApp.controller('mainController', ['$scope', '$http', '$compile', function ($scope, $http, $compile)
            {
                    $scope.activateView = function(ele) 
                    {
                            $compile(ele.contents())($scope);
                            $scope.$apply();
                    };

                    $scope.buttonClick = function()
                    {
                            $("#popup").html( dynamicHTMLThroughAJAX );
            $scope.activateView($("#divCreateTemplatePopup"));

                            return;
                    }
                    return;
            }]);
    </script>

Dynamic HTML Content

    <div ng-controller='childController'>
            Some HTML here.
    </div>


    <script type="text/javascript">
            angularMainApp.controller('childController', ['$scope', '$http', function ($scope, $http)
            {
            }]);
    </script>

score 0 · Accepted Answer · edited May 23 '17 at 12:00

Angular need to know that you changed the content and realize that it should update it self too .

so , what you have to do is tel him that apply the watchers and other stuff to the current DOM .

for doing that you shall use $scope.$apply(); . by calling this function you force angular to add watchers and other stuff's to the DOM and now it can work with you'r new contents too .

i suggest you to read about digest in angularjs and see how it works . here's some link about your problem to see the problem better :

AngularJS and scope.$apply

Digest cycle and $scope

AngularJs docs : $scope.$apply()

When to use $scope.$apply()

AngularJS: $watch, $digest and $apply

good luck and have fun .