Return selection from Angular Bootstrap modal factory using controller as

Question

I'm trying to use a modal dialog as a selection list. I've got the modal dialog configured as a factory.

How can I get the code at http://plnkr.co/edit/fVpNtrr4Ez68yWYUlgnO?p=preview to return the selected person from the modal window?

var selectModal = function ($modal) {
        function show(personList) {
            var modalOptions = {
                templateUrl: "select-modal.html",
                controller: selectModalInstanceCtrl,
                controllerAs: "modal",
                windowClass: "ab-modal-window",
                resolve: {
                    personList: function () { return personList; }
                }
            };

            var modalInstance = $modal.open(modalOptions);

            modalInstance.result.then(function (person) {
                return person;
            });
        }

        return {
            show: show
        };
};


var selectModalInstanceCtrl = function ($modalInstance, personList) {
  var modalVm = this;

    modalVm.personList = personList;

    modalVm.selectPerson = function (person) {
        $modalInstance.close(person);
    };

    modalVm.ok = function () {
        $modalInstance.dismiss("ok");
    };
};


var mainCtrl = function (selectModal)
{
  var vm = this;

  vm.personList = ['Tom','Dick','Harry','Jane'];
  vm.selectedPerson = null;

    vm.showSelectModal = function () {
        vm.selectedPerson = selectModal.show(vm.personList, vm.selectedPerson);
    };

};

selectModalInstanceCtrl.$inject = ["$modalInstance", "personList"];
selectModal.$inject = ['$modal'];
mainCtrl.$inject = ['selectModal'];

angular.module('app', ['ui.bootstrap']);
angular.module('app').factory('selectModal', selectModal);
angular.module('app').controller('mainCtrl', mainCtrl);

At line 18 in script.js, the selected person is there but I can't get it passed back to the main controller.

Answer 1

// Code goes here

var selectModal = function ($modal) {
   function show(personList) {
        var modalOptions = {
            templateUrl: "select-modal.html",
            controller: selectModalInstanceCtrl,
            controllerAs: "modal",
            windowClass: "ab-modal-window",
            resolve: {
                personList: function () { return personList; }
            }
        };
        var modalInstance = $modal.open(modalOptions);
        return modalInstance;
    }

    return {
        show: show           
    };
};


var selectModalInstanceCtrl = function ($modalInstance, personList) {
var modalVm = this;

modalVm.personList = personList;

modalVm.selectPerson = function (person) {
    $modalInstance.close(person);
};

modalVm.ok = function () {
    $modalInstance.dismiss("ok");
};
};


var mainCtrl = function (selectModal)
{
    var vm = this;
    vm.personList = ['Tom','Dick','Harry','Jane'];
    vm.selectedPerson = null;

    vm.showSelectModal = function () {
       var modalInstance = selectModal.show(vm.personList);
       modalInstance.result.then(function (person) {
           vm.selectedPerson = person;
       });
    };
 };

 selectModalInstanceCtrl.$inject = ["$modalInstance", "personList"];
 selectModal.$inject = ['$modal'];
 mainCtrl.$inject = ['selectModal'];

 angular.module('app', ['ui.bootstrap']);
 angular.module('app').factory('selectModal', selectModal);
 angular.module('app').controller('mainCtrl', mainCtrl);