Unable to load angularjs component defined in another module

Question

I have below component:

angular.module('dummyApp', [])
.component('myComponent', myComponent)

function myComponent(){
    return {
        template: '<B> Hello World!</B>'
    }
}

When I tried to load above component in another module using $ocLazyLoad, it not loading and there is no any error:

angular.module('mainApp', 'oc.lazyLoad', 'ui.bootstrap')
    .controller('appController', function($ocLazyLoad, $modal){

        $ocLazyLoad.load({
            name: 'dummyApp',
            files: ['../app.component.js']
        }).then(function() {
            var modalInstance = $modal.open({
                backdrop: 'static',
                keyboard: true,
                backdropClick: false,
                template: '<my-component></my-component>',
                windowClass: 'edit-contactenblad',
            });
        });
    })

I can only see HTML with below tags:

<div role="dialog" class="modal fade sm in" ....>
    <div class="modal-dialog" >
       <div class="modal-content" modal-transclude="">
          <my-component class="ng-scope ng-isolate-scope"></my-component>
       </div>
    </div>
</div>

Here <my-component> tag is not parsing tempate defined in component.

But same component if I define in 'mainApp' module than it is successfully parsing template.

Version details:

1. AngularJS : 1.5.6
2. ui.bootstrap: 2.5.0
3. oc.lazyLoad: 0.6.0