Angular - Can't access directives scope when directive is injected outside of Angular

Question

I am injecting Angular markup from within a jQuery plugin (got the idea from this gist ):

var $place = this.$el.find('.medium-insert-active');
Angular.element($place).injector().invoke(function($compile) {
    var scope = Angular.element(document.getElementById('editor-container')).scope();
    $place.html($('<quiz/>'));
    var quiz = $compile($place.contents())(scope);
    scope.$digest();
});

Here is the quiz directive:

const quiz = {
    controller: QuizController,
    controllerAs: 'qm',
    template: require('./quiz.html'),
}

This successfully compiles my directive into the DOM and instantiates a QuizController .

I am wondering how to access the scope (and QuizController ) of my quiz directive.

I thought it would be quiz.scope() but this gives the scope contained within the scope variable.

Here is a plunker .

Answer 1

I was creating an isolate scope as I was creating a component . If I instead create a directive without an isolate scope, the controller is attached to the scope that was passed into the linking function returned by $compile .