Typescript Angular ui bootstrap modal

Question

I am using angular.ui.bootstrap modal to show a form in a modal. Everything is working fine, except when I close the modal, I want a table on the parent page to be updated with the new item added in the modal.

My parent controller:

module MyApp.Controllers {

export interface IController {
    items: Models.IItem[];
}

export interface IControllerScope {

}

export class Controller implements IController {
    items: Models.IItem[];

    constructor(
        private $scope: IControllerScope,
        private $modal: ng.ui.bootstrap.IModalService) {

    }

    addItem() {
        var options: ng.ui.bootstrap.IModalSettings = {
            templateUrl: '/directives/formFirective',
            controller: 'formController',
            controllerAs: 'modal',
            resolve: {
                id: () => 1234
            }
        };

        this.$modal.open(options).result
            .then(function (item) {
                // How do I add item to the instance variable items here?
                this.items.push(item) // Does not work here :(
                console.log(item)
            });
    }
}

}

Then in the formController I have:

this.$modalInstance.close(item);

My question is how to add the item to the instance variable items on the parent controller on modal close?

Thanks.

Answer 1

try to change =>

function (item) {
                // How do I add item to the instance variable items here?
                this.items.push(item) // Does not work here :(
                console.log(item)
            }

in to:

(item) => {
                // How do I add item to the instance variable items here?
                this.items.push(item) // Does not work here :(
                console.log(item)
            }