Controller is loaded in DOM but the view not loaded and can't find controller- oclazyload with jade(pugjs)

Question

I am using angular 1.6 for my project and angular-ui-routing for routing with PugJs for HTML templates. I am trying to implement Lazyload in my application, but somehow its not working may be due to jade. code :

var app = angular.module('myApp',['ui.router','oc.lazyLoad']);
app.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider
 {
   $ocLazyLoadProvider.config({
   debug: true,
   modules: [{
   name: 'js',
   files: ['js/*']
 }]
});
}]);

.state("exampleState", {
        url: '/example',
        templateUrl: '/example',
        controller:'exampleCtrl',

        resolve: {
            deps: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    files: ['/js/exampleCtrl.js']
                })
            }]
        }
    })

Controller :

app.controller('exampleCtrl',function($scope){
  console.log('controller loaded');
});

and on the frontend I am using node to convert these jade into HTML, so when 'templateUrl' is accessed by routing services it would be redirected to this code:

app.get('/example', function(req, res) {
    res.render('/example');
});

this loads the example.jade in view. I am getting this in console

[$controller:ctrlreg] The controller with the name 'exampleCtrl' is not registered.

Even after controller file is loaded in DOM and also view is not rendering. any help regarding issue welcomed. Thank you

Answer 1

After too much search and try i have found the solution, the problem was global variable for the module when constructing controller. Instead of using

app.controller('exampleCtrl',function($scope){
  console.log('controller loaded');
});

I used angular.module('myApp').controller(,,,);

Reference : ocLazyLoad Issues

Answer 2

I think you should do this a little bit different. Try this:

$stateProvider.state('exampleState', {
  url: "/example",
  views: {
    "exampleLazyLoadView": {
      controller: 'exampleCtrl',
      templateUrl: '/example.html'
    }
  },
  resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
             return $ocLazyLoad.load('/js/exampleCtrl.js');
    }]
  }
});