using expression for controller name(ng-controller) in a directive in AngularJS

Question

Instead of specifying controller name using ng-controller I want to specify controller name via an attribute in the directive and then replace it in the template(I want to do it this weird way just to explore AngularJS).

Here is the link to the plunk: http://plnkr.co/edit/KZgLQ6?p=preview

eg of what I am trying to do

<sample-drtv ctrl-name="drtvCtrl"></sample-drtv>

template(sampleDrtv.html):

<div ng-controller="{{ctrlName}}"> 
  <p>{{ptagcontent}}</p>  
</div>

Directive code:

var myModule = angular.module('ng');

myModule.directive('sampleDrtv',[function(){
    return {
        restrict: "E",
            replace: true,
            templateUrl: "sampleDrtv.html",
            scope: {},
            controller: function($scope,$element,$attrs){
                $scope.ctrlName = $attrs.ctrlName;
                console.log($scope);
            }
        };

}]);

function drtvCtrl($scope){
  $scope.ptagcontent = "AngularJS Rocks";  
}

I am getting this error on my console:

Error: Argument '{{ctrlName}}' is not a function, got undefined

Any ideas on what should I do so that ctrlName is replaced in the expression? I am sure I do not understand concepts of directives completely and so I am doing a mistake?

Answer 1

I would recommend this structure :

<sample-drtv></sample-drtv>

template(sampleDrtv.html):

<div ng-controller="drtvCtrl"> 
  <p>{{ptagcontent}}</p>  
</div>

AngularJS Part:

var myModule = angular.module('ng');

myModule.directive('sampleDrtv',[function(){
  return {
    restrict: "E",
    replace: true,
    templateUrl: "sampleDrtv.html"
  };
}]);

function drtvCtrl($scope){
  $scope.ptagcontent = "AngularJS Rocks";  
}

See the Plunk: http://plnkr.co/edit/GwnqK6?p=preview