Question: I have a single page application where i want to split my code in two separate js files, like this -
 Script1.js -

```
 var app = angular.module("AngularJs", ["ui.router"])
                     .config(function ($stateProvider) {
                         $stateProvider
                           .state("home", {
                              url:"/home",
                               templateUrl: "Template/Home.html",
                               controller: "homeController",
                               controllerAs: "homectrl"
                           })
                        .state("courses", {
                            url: "/courses",
                            templateUrl: "Template/Courses.html",
                            controller: "coursesController",
                            controllerAs: "Coursectrl"
                        })                       
                                .state("newregistration", {
                                    //  url: "/students",
                                   templateUrl: "Template/NewRegistration.html",
                                    controller: "newregistration",
                                    controllerAs: "newregistrationctrl"
                                })                      
                     })

```

i have defined controller for all the state

```
    .controller("homeController", function () {
         this.message = "Home Page";
     })
            .controller("coursesController", function () {
                this.courses = ["C#", "VB.NET", "SQL Server", "ASP.NET"];
                this.message = "Courses Page";
            })

Now problem is that i want to define other controller on other script file - 
Script2.js -    
.controller("newregistration", function () {
    this.meassage = "New Employee Registration sfdsf";
})    

```

how to separate the code into two different js files.

Answer: 
Try this.

`.open` method returns a promise that could be chained with `.closed` which is one of the many properties of `.open` method.

I tested it and it shows the alert only after the modal has closed and not while it's 'closing'.

Refer the 'closed' under **Return** section [here](https://angular-ui.github.io/bootstrap/#/modal)

```
var modalInstance = $uibModal.open({
    templateUrl: "myModalContent.html",
    controller: "termModalCtrl",
    windowClass: 'app-modal-window',
    resolve: {
        'params': function () { return id }
    }
}).closed.then(function(){
  window.alert('Modal closed');
});

```

here is the plunker <http://plnkr.co/edit/yB3k8e3R3ZLQFQ6sfLYW?p=preview>
Use `modalInstance.result` promise second callback to catch the closing event.
I'm also getting exception **'Unable to get property 'then' of undefined or null reference'** on `.closed.then` ,

```
 var modalInstance = $uibModal.open({
    templateUrl: "myModalContent.html",
    controller: "termModalCtrl",
    windowClass: 'app-modal-window',
    resolve: {
        'params': function () { return id }
    }
});

modalInstance.result
   .then(function (selectedItem) {
    //
   }, function () {
    //close callback
    console.info('modal closed');
   });

```