ocLazyLoad and angular.bootstrap

Question

I want to add a ocLazyLoad in my mean-stack website. Here is the code:

    .state('kpi', {
        url:'/kpi',
        templateUrl: '/htmls/kpi.html',
        resolve: {
            loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
                return $ocLazyLoad.load('/javascripts/kpi-controller.js').then(function () {
                    console.log("done");
                }, function (e) {
                    console.log("error")
                })
            }]
        }}

Loading the kpi page returns

bootstrapped
kpi-controller inside
done
Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=KpiCtrl&p1=not%20aNaNunction%2C%20got%20undefined

where the error is about Error: ng:areq Bad Argument Argument 'KpiCtrl' is not a.

KpiCtrl is defined in kpi-controller.js, and printing kpi-controller inside in the console shows the file has been indeed loaded. But why KpiCtrl is still not recognized?

One thing special about my code is, in the beginning of the program, I have

jQuery(document).ready(function () {
    angular.bootstrap(document, ['myweb'])
    console.log("bootstrapped");
})
app = angular.module('myweb', ['ui.router', 'oc.lazyLoad']);

I did not understand angular.bootstrap well, but it seems that the new loaded KpiCtrl should be bootstrapped to be recognized. I tried to add angular.bootstrap(document, ['myweb']) inside ocLazyLoad, but it showed App already bootstrapped with this element 'document'.

Does anyone know how to solve this?