Data from directive with custom template

compile.coffee

angular.module("app").directive 'box', ($compile) ->
  restrict: 'AE'
  scope: {}
  compile: (elem, attrs) ->
    template = elem.html()

    (scope, elem, attrs, controller) ->
      elem.empty()
      elem.append($compile(template)(scope))

      scope.data = { key: 'value' }

custom_template.coffee

angular.module("app").directive 'box', ->
  restrict: 'AE'
  scope: {}
  template: '<div ng-include="template"></div>'
  link: (elem, attrs) ->
    scope.template = attrs.template || 'default.html'
    scope.data = { key: 'value' }

custom_template_url.coffee

angular.module("app").directive 'box', ->
  restrict: 'AE'
  scope: {}
  templateUrl: (tElement, tAttrs) ->
    tAttrs.templateUrl || 'default.url.html'
  link: (elem, attrs) ->
    scope.data = { key: 'value' }

transclude.coffee

# http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

angular.module('app').directive 'box', ->
  restrict: 'EA'
  scope: {}
  transclude: true
  link: (scope, element, attrs, ctrl, transcludeFn) ->
    scope.data = { key: 'value' }
      
    transcludeFn scope, (clone, scope) -> 
      element.append(clone)

two_directives.coffee

# http://plnkr.co/edit/AO9cRXKqpdnTk1Yonpl4?p=preview

angular.module('app').directive 'data', ->
  restrict: 'EA'
  controller: ['$scope', ($scope) ->
    $scope.data = {
      "key": "value"
    }
  ]

angular.module('app').directive 'template', ->
  restrict: 'EA'
  require: 'data'
  template: '<div>{{ data.key }}</div>'