Contidional template - Controller 'mdRadioGroup', required by directive 'mdRadioButton', can't be found

Question

I'm trying to build custom directive that will allow me to display questions in survey. Because I have multiple types of questions I thought about creating single directive and change it's template based on question type.

my directive:

directive('question', function($compile) {
  var combo = '<div>COMBO - {{content.text}}</div>';
  var radio = [
    '<div>RADIO - {{content.text}}<br/>',
    '<md-radio-group layout="row" ng-model="content.answer">',
    '<md-radio-button ng-repeat="a in content.answers track by $index" ng-value="a.text" class="md-primary">{{a.text}}</md-radio-button>',
    '</md-radio-group>',
    '</div>'
  ].join('');
  var input = [
    '<div>INPUT - {{content.text}}<br/>',
    '<md-input-container>',
    '<input type="text" ng-model="content.answer" aria-label="{{content.text}}" required md-maxlength="10">',
    '</md-input-container>',
    '</div>'
  ].join('');

  var getTemplate = function(contentType) {
    var template = '';

    switch (contentType) {
      case 'combo':
        template = combo;
        break;
      case 'radio':
        template = radio;
        break;
      case 'input':
        template = input;
        break;
    }

    return template;
  }

  var linker = function(scope, element, attrs) {

    scope.$watch('content', function() {
      element.html(getTemplate(scope.content.type))
      $compile(element.contents())(scope);

    });
  }

  return {
    //require: ['^^?mdRadioGroup','^^?mdRadioButton'],
    restrict: "E",
    link: linker,
    scope: {
      content: '='
    }
  };
})

Inside my main controller I have list of questions and after clicking button I'm setting current question that is assign to my directive.

Everything works fine for first questions, but after I set current question to radio type I get this error:

Error: [$compile:ctreq] Controller 'mdRadioGroup', required by directive 'mdRadioButton', can't be found!

I've tried adding required to my directive as below, but it didn't helped.

require: ['^mdRadioGroup'],

I can't figure out whats going on, because I'm still new to angular.

I've created Plunker to show my issue: http://plnkr.co/edit/t0HJY51Mxg3wvvWrBQgv?p=preview

Steps to reproduce this error:

1. Open Plunker
2. Click Next button two times (to navigate to question 3)
3. See error in console

EDIT:
I've edited my Plunker so my questions model is visible. I'm able to select answers, even in questions that throw error-questions model is updating. But still I get error when going to question 3.

Answer 1

I'd just simply extend a base directive, and then have a specialized ones with different directive names too.

// <div b></div>
ui.directive('a', ... )
myApp.directive('b', function(aDirective){
   return angular.extend({}, aDirective[0], { templateUrl: 'newTemplate.html' });
});

Code taken from https://github.com/angular/angular.js/wiki/Understanding-Directives#specialized-the-directive-configuration

Answer 2

Working Demo

There is no need to create and use a directive for your requirement.

You can just use angular templates and ng-include with condition.

You can just create three templates (each for combo, radio and input) on your page like this,

<script type="text/ng-template" id="combo">
    <div>COMBO - {{content.text}}</div>
</script>

And include these templates in a div using ng-include.

<!-- Include question template based on the question -->
<div ng-include="getQuestionTemplate(question)">

Here, getQuestionTemplate() will return the id of the template which should be included in this div.

// return id of the template to be included on the html
$scope.getQuestionTemplate = function(content){
    if(content.type == "combo"){
      return 'combo';
    }
    else if (content.type == "radio"){
      return 'radio';
    }
    else{
      return 'input';
    }
}

That's all. You are done.

Please feel free to ask me any doubt on this.