angularjs - TypeError: Cannot read property 'open' of undefined -

i trying create pop using modal in angular js.i facing , issue.its says.

typeerror: cannot read property 'open' of undefined. throwing @ $modal.open statement.

the code config below :

homemoduleapp.config(function ($stateprovider) {    $stateprovider.state('login', {     url: '/login',     //templateurl: '/app/ng/modules/home/partials/login-partials-view.html',     //controller: 'modaldemoctrl'     onenter: function($stateparams, $state, $modal) {       $modal.open({         templateurl: '/app/ng/modules/home/partials/login-partials-view.html',         resolve: {},         controller: 'modaldemoctrl'       }).result.then(function (result) {         // $scope.$close         alert('result ->' + result);       }, function (result) {         // $scope.$dismiss         alert('dismiss ->' + result);       }).finally(function () {         // handle         console.log('hello....');       });     }    }) }); 

can guide me issue?

thanks

so, here i've put jsbin demonstrates how code.

you can't use $modal service in .config section, services not available @ state of angular bootstrapping (perhaps $modalprovider is, i'm not sure). so, can set state go log in page, like:

.config(function($stateprovider) {   $stateprovider     .state('login', {       url: '/',       templateurl: 'login.html',       controller: 'logincontroller',       controlleras: 'vm'   }); }) 

and in controller, can use invoked function expression (iife) trigger controller loaded, include $modal.open code, like:

.controller('logincontroller', function($modal) {   (function() {     $modal.open({       templateurl: 'loginmodal.html',       controller: 'loginmodalcontroller',        controlleras: 'vm'     }).result.then(function (result) {       alert('result ->' + result);     }, function (result) {       alert('dismiss ->' + result);     }).finally(function () {       console.log('hello....');     });   })();