Angular object undefined after compiled in html string pass to another Directive

Question

I am doing something like this in Angular.
After compiled, the object will not be passed to the DirectiveB correctly.
However, if I passed the object defined in scope, it will be fine.
I wonder why this happens and how can I pass an object(not in scope) to a directive with a compiled html string in an easy way? I used closure to do that, but it is not easy to maintain.

In DirectiveA.js:

.directive('DirectiveA', function($compile, $parse) {
    return
    ...
    link: function(scope, element, attrs) {

        function func_be_called_somewhere (...) {

            var obj= {"key":"value"};   //obj is not in scope, I create it here

            var el = '<DirectiveB para="obj" ...>';
            var content = $compile(el)(scope);  //compiled here
            element.append(content);
        }
    }
}

In DirectiveB.js:

.directive('DirectiveB', function($compile, $rootScope, $parse) {
    ...
    scope: {
        ...
        para: '='
        ...
    }
    link: function(scope, element, attr) {
        console.log(scope.para); //undefined
    }
}

JS BIN : http://jsbin.com/depohoqofi/edit?html,js,console,output

Answer 1

I think you should put your obj in your scope :

scope.obj= {"key":"value"};   //obj is not in scope, I create it here
var el = '<DirectiveB para="scope.obj" ...>';
var content = $compile(el)(scope);  //compiled here
element.append(content);