title: How to set dynamic controller in Angular directive
body: <p>I am trying to specify the name of the controller, to be used with the directive, through a variable passed as a directive attribute by the parent controller.</p>
  
  <p>I followed <a href="https://stackoverflow.com/questions/19444414/how-to-set-the-dynamic-controller-for-directives">this</a> post, and prepared the below directive.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('myApp', [])
  
  .controller('parent', function($scope) {
    $scope.scopeVar = 'child';
  })
  
  .controller('child', function($scope) {
    $scope.msg = 'Hello';
  })
  
  .directive('myDir', function($rootScope) {
    return {
      template: '&lt;div&gt;Message: {{msg}}&lt;/div&gt;',
      controller: '@',
      name: 'controllername'
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="myApp" ng-controller="parent"&gt;
    &lt;my-dir controllername="{{scopeVar}}"&gt;&lt;/my-dir&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that the <code>controllername</code> attribute's value is being treated as a string, and not being resolved into the required value.</p>
  
  <p>That is if we hard code</p>
  
  <pre><code>&lt;my-dir controllername="child"&gt;
  </code></pre>
  
  <p>instead of</p>
  
  <pre><code>&lt;my-dir controllername="{{scopeVar}}"&gt;
  </code></pre>
  
  <p>it works (but that's not what I want)</p>