How to add Controller Dynamically

In my app, I have two pages. First page have static controller. Want to add Second page controller file dynamically.

I tried to load JS file using this funcion

function loadJS() {        
        var jsElm = document.createElement("script"); 
        jsElm.type = "application/javascript";    
        jsElm.src = "TwoCtrl.js"; 
        document.body.appendChild(jsElm); 
}

It added controller js file to body. But I got undefined exception while redirect to second page. Argument 'TwoCtrl' is not a function, got undefined

TwoCtrl.js

app.controller('TwoCtrl', function (){

});

My config below. Please help. Thanks in advance!

app.config(function($stateProvider, $urlRouterProvider) {  
	loadJS();
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "partials/state1.html",
      controller: 'OneCtrl'
    })
	.state('state2', {
      url: "/state2",
      templateUrl: "partials/state2.html",
      controller: 'TwoCtrl'
    });
    $urlRouterProvider.otherwise("/OneCtrl");
});