Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/ng-template" id="customControllerTemplate.html">
  Controller name: {{name}}
</script>

<div ng-controller="myCtrl">
  <div ng-repeat="controller in controllerList">
    <div custom-controller="controller.name">
      <div ng-include="'customControllerTemplate.html'"></div>
    </div>
  </div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('myCtrl', myCtrl);
myApp.controller('firstController', firstController);
myApp.controller('secondController', secondController);
myApp.directive('customController', customController);

function myCtrl($scope) {
    $scope.controllerList = [
    	{
      	name: 'firstController'
      },
      {
      	name: 'secondController'
      }
    ]
}


function firstController($scope){
	console.log('firstController','loaded');
	$scope.name = 'firstController';
}

function secondController($scope){
  console.log('secondController','loaded');
	$scope.name = 'secondController';
}

function customController($compile){
	return {
      priority:1001, 
    	terminal:true, 
    	link: function(scope,element,attrs){
        	var ctrlName = scope.$eval(attrs['customController']);
          element = angular.element(element.children());
          element.attr('ng-controller',ctrlName);
        	$compile(element)(scope);
    	}      
   };          
}