[Angularjs Async] How to load controllers in templates and directives asynchronous with webpack/commonJs

controller.js

function NavBar($http) {
  this.date = new Date();
  this.getHttp = function(){
    console.log($http);
  }
};

module.exports = NavBar;

directive.js

.directive('navbarController', function($http){
return{
  restrict:'A',
  link:function(scope, element, attrs){
    scope[attrs.ngControllerUrl] = null;
    var load = require('bundle?lazy!./controller.js');
    load(function (file) {
      scope.$apply(function(){
        scope[attrs.ngControllerUrl] = new file($http);
      })
    });
  }

template.html

<div navbar-controller="app">
Date: {{app.date}}
<a href="#" ng-click="app.getHttp()">Get $http servicer</a>
</div>