Жасмин: Как издеваться над MutationObserver?

У меня есть компонент angularjs,

HTML-шаблон

<div id = "panel" class = "hide-div">
   <div id = "viewPort" class = "hide-div">
    ...
   </div>
</div>

JS

var myController = function() {
    var ctrl=this;
    ctrl.$onchanges = function() {

    }

    var source = $("#viewport");
    var target = $("#panel");
    var observer = new MutationObserver(function() {
       target.toggleClass("hide-div", source.hasClass("hide-div"));
     });
    observer.observe($("#viewport")[0], {attributes: true});
}

var config = {
    controller: [myController],
    templateUrl: "temp/abc.html",
    bindings: {
        id: "<",
        name: "<"
    }
};

directives.component("myComponent", config);

Здесь у меня есть MutationObserver, который добавляет / удаляет класс, наблюдая за другими атрибутами элементов.

Жасмин сценарий Здесь я настраиваю скрипт для всех тестовых случаев

beforeEach(inject(function($rootScope,  $compile, _$componentController_, ...){
    $templateCache.put("temp/abc.html", "<div><div id='panel' /><div id='viewport' /></div>");
    rootScope = $rootScope;
    scope = $rootScope.$new();
    $componentController = _$componentController_;
    element = angular.element("<my-component></my-component>");
    element = $compile(element)(scope);
    ctrl = $componentController("myComponent", null, componentBining);
}));

Здесь я получаю следующую ошибку:

NotFoundError: NotFoundError: DOM Exception 8 in temp/abc.html observe@[native code]