gistfile1.txt

Directive

app.directive \component, [\$injector \$compile \$q (injector, compile, q) ->
        deferred = q.defer!
        promise = deferred.promise

        scope: {}
        restrict: 'A'
        compile: (element, attrs) ->
            require [attrs.component] (component) ->
                deferred.resolve component

            (scope, element) ->
                promise.then (component) ->
                    element.html component.template
                    compile(element.contents!)(scope)

                element.html \Loading...
        controller: [\$scope (scope) ->
            promise.then (component) ->
                injector.invoke component.controller, null, '$scope': scope
        ]
    ]


View

<h1>Log</h1><div x-component=log/component></div>


log/component

define [\text!./template.html], (template) ->
    template: template
    controller: [\$scope \$rootScope (scope, root) ->
        scope.logs = []

        root.$on \pull.log, (e, log) ->
            scope.logs.push log
    ]