Use angular controller in dynamically loaded html

Question

I have following code

app.js

var app = angular.module('myModule', ['schemaForm', 'base64', 'ngRoute']);

taskController.js

app.controller('TaskController', function($scope, AuthService, $http, $base64, $location) {
    $scope.fetchFormKey = function() {
        $http.defaults.headers.common['Authorization'] = 'Basic ' + AuthService.auth;
        $http.get(restServerURL + '/task/' + $scope.taskId + '/form').
        success(function(data) {
            $scope.formKey = "./partials/itpTrainingCreation/" + data.key + ".html";
        });
    }

}

task.html

<h2>Generated form</h2>
<div ng-controller="TaskController" ng-init="fetchFormKey()">
    <div ng-include src="formKey"></div>
</div>

In dynamically loaded file (loaded by ng-include) i want to define angular controller which will be used by this file.

dynamic.html (example)

<script>
angular.module('myModule').controller('DymanicController', function($scope, AuthService, $http, $base64, $location) {
 $scope.exampleValue="myCustomValue";
});
</script>
<div ng-controller="DymanicController">
    {{exampleValue}}
</div>

Unfortunately i get following error: http://errors.angularjs.org/1.5.5/ng/areq?p0=DymanicController&p1=not%20a%20function%2C%20got%20undefined

How can I change my code to fix this problem?

Answer 1

I assume your dynamic contents have some template. I think you should take look at script in angularjs

<script type="text/ng-template" id="/tpl.html">
  Content of the template.
</script>

and use ui-routing to add your dynamic content, assign controller there in router.

Answer 2

If you wanna load a module on the fly I recommend ocLazyload. That worked pretty well in one side project of mine.

myApp.controller("MyCtrl", function($ocLazyLoad) {
  $ocLazyLoad.load('testModule.js');
});

works well with routers.

Answer 3

I found similar question how to include javascript file specific to each view angularjs

    You can't. Angular does not load javascript parts from a template.
    What you should do is to include them in your main application anyway.
    All of the controllers should be loaded while the main app is initiating. 

Could someone confirm this thesis?