Getting undefined method error if open modal from service

Question

I have put the bootstrap modal inside service and i want to open it from there. But i am getting error in firebug . The code still works fine but there is error in firebug

I have a service like this

'use strict';

angular.module('test')
    .factory('commonService', [
        '$http',
        '$log',
        '$modal',
        '$q',
        function ($http, $log, $modal, $q) {
            var api_url = "/api/";
            var
                commonService = {

                    self: this,

                    open: function (modelName, templateUrl) {

                        var modalInstance = $modal.open({
                            templateUrl: templateUrl,
                            controller: 'ModalInstanceCtrl',
                            resolve: {
                                modelName: function () {
                                    return modelName;
                                }
                            }
                        });

                        modalInstance.result.then(function (result) {
                            console.log(result);
                        }, function () {
                            $log.info('Modal dismissed at: ' + new Date());
                        });
                    }//

                };

            return commonService;
        }])
;

This is my controller

$scope.openModal = function (modelName) {
    commonService.open(modelName, 'test.html').then(function (result) {
        console.log('res')

    }, function (error) {
        console.log(error);
    })

};

I open like this in template

ng-click="openModal('User')"

The problem is i get this error in firebug

TypeError: commonService.open(...) is undefined


commonService.open(modelName).then(function (result) {

but my modal still opens fine with content

Answer 1

Common service.open method should return modalInstance.result . here modalInstance.result is a promise which you can resolve it in your controller.