directive inside directive

by bmleite

HTML

<div ng-controller="Ctrl">
    <tabcontent></tabcontent>    
<div>

JavaScript

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

function Ctrl($scope) {      
    $scope.type = "recipe"
}

app.directive('tabcontent', function($compile){
  return {    
    template:'<div></div>',
    replace: true,    
    transclude: false,
    restrict: 'E',
    scope: false,    
    link: function postLink(scope, iElement, iAttrs) {
        scope.$watch('type', function(val) {
            iElement.html('<div '+val+'></div>');           
            $compile(iElement.contents())(scope);         
        });
    }
  };  
});

app.directive('recipe', function() {
  return {    
    restrict: 'A',
    template:'<div>TESTING</div>',
    replace: true
  };  
});