AngularJS Iframe wraps iframe, the child iframe could not open same domain URL

I am writing a directive which allows to scale the inner iframe every time the content inside of an element is changed. My question is not about modifying something inside the iframe or Same Origin policy problem. The second iframe is not loaded on the certain case. Please read through my description below

<div my-directive>
<a class="box" href="javascript:void(0)">
<iframe fake-src="{{URL1}}" /> <!-- this iframe on fly -->
</a>
</div>

The code is:

app.directive('myDirective', function ($timeout, $sce, $timeout, ssHelper, ratchetService) {

return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.url = '';


            var url, boxElem;
            var loadOnce = false;
            scope.$watch(function(){  return element.html();  },
                function(elementBody, oldElementBody){
                    //console.log('trigger frame-matrix change', $(element) )
                    if(elementBody.trim() != ''){
                        //get the content under of the frame-matrix tag
                        boxElem = $(element).find('.box').eq(0);


                            var fakeIframe = $(element).find('iframe[fake-src]');

                            if(fakeIframe.length > 0){
                                var boxWidth = $(element).data('box-w');
                                var boxHeight = $(element).data('box-h');

                                var _url;
                                //if(scope.url != fakeIframe.attr('fake-src')){
                                    loadOnce = false; //prevent webkit load twice

                                    scope.url = fakeIframe.attr('fake-src')
                                    fakeIframe.removeAttr('fake-src')
                                    _url = $sce.trustAsResourceUrl(scope.url);

                                    fakeIframe.attr('src', _url)
                                    //fakeIframe.on('load', function () {
                                    fakeIframe.load(function () {
//something wrong happened and the code does not work in the case iframe of iframe

                                        if(!loadOnce){
                                            loadOnce = true;
                                            beautify(fakeIframe, boxWidth, boxHeight); // To make this short, I skip the beautify function code in this example
                                        }

                                    })
                                //}

                        }


                    }
            });


        }
    };
});

I have page A contains a iframe opening URL1 which is using above directive and it works fine. I make page B which contains a iframe(first/parent iframe) references to page A above, there is two cases are happening:

1. If URL1 (of page A's iframe) is EXTERNAL URL (not same my website domain), it will work fine
2. If URL1 (of page A's iframe) is INTERNAL URL (same my website domain), it WON'T work. the iframe's onload event never fires on this case. Again, this happened on same domain URL.