title: AngularJS - Turn ng-controller name into a directive variable
body: <p><strong>If I have a div inside a directive template with an attribute value to a ng-controller, how can I change that into a variable:</strong></p>
  
  <pre><code>original html : &lt;div ng-controller="HomeController"&gt; ..... &lt;/div&gt;
  
  directive: &lt;my-directive some-var-name="HomeController"&gt; ....&lt;/my-directive&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>.directive('MyDirective', function(){
    return {
     .....
     scope:
     {
       someVarName : "????"  &lt;-- what type? "=", "@", "&amp;" : none seem to work
     },
     template: '&lt;div ng-controller="someVarName"&gt;.....&lt;/div&gt;'      
     }
     });
  </code></pre>
  
  <p><strong>Thanks Mark for solving this:</strong></p>
  
  <pre><code>    &lt;select-add-new  select-model="$parent.selectedFrontAxle" text="add new" 
               select-phrase="Front Axle Type" preselected-filter="Front" 
               label-name="Front Axle" open-dialog="Front" 
               select-options="axleTypes" var-ctrl="AxleTypesCtrl"&gt;&lt;/select-add-new&gt;
  
    .directive('selectAddNew', function () {
     return {
      replace: true,
      restrict: "E",        
      scope: {
          selectModel: "=",
          selectOptions:"=",
          labelName: "@",
          preselectedFilter: "@",
          selectPhrase: "@",
          text: "@"
      },
      compile: function(tElement, attrs) {
          var div = tElement.find('#ctrlId');
          div.attr('ng-controller', attrs.varCtrl);
      },
      template: '&lt;div&gt;' + 
                '&lt;div class="local-label"&gt;{{labelName}}: &lt;/div&gt;' +
                '&lt;name-value-select-control  select-phrase="{{selectPhrase}}" selected-item="selectModel" preselected-filter="{{preselectedFilter}}" options="selectOptions"&gt;&lt;/name-value-select-control&gt;' +
                '&lt;div id="ctrlId"&gt;' +
                '&lt;div txt-add-new text="{{text}}" action="openDialog(\'Front\')" style="display: inline-block"&gt;&lt;/div&gt;' +
                '&lt;/div&gt;' +
                '&lt;/div&gt;'
  };
  </code></pre>
  
  <p>})</p>
  
  <p>---------------------------------------------Mark------------------------------------------------------</p>
  
  <p><strong>Here's the plunker:</strong></p>
  
  <p><a href="http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB" rel="nofollow">http://plnkr.co/edit/b6G2y3yqjhxpu059ZrWB</a></p>
  
  <p><strong>Here is the problem:</strong></p>
  
  <p>I combined two directives into one super directive. If you go to app.js, directive 'selectAddNew', thrid line from the bottom you will see:</p>
  
  <p>.........     action="openDialog(\'Front\')"   ..................</p>
  
  <p>But that is hard coded. I tried every which way to make it an action in the super directive but the closest I came was the common dialog opening a window of the entire form. Any ideas?</p>