Unknown provider: $modalInstanceProvider <- $modalInstance

Question

I am trying to call a modal using angularui-bootstrap like this.

var authApp = angular.module('AuthApp', ['ui.bootstrap']);
authApp.controller('AuthController',
 ['$scope', '$uibModal',
 function ($scope, $uibModal) {
     //$scope.credentials = {
     //    userName: "",
     //    uPassword: "",
     //    rememberMe: ""
     //};
     $scope.OpenLoginModal = function (templateUrl) {
         var modalInstance = $uibModal.open({
             animation: false,
             backdrop: 'static',
             templateUrl: templateUrl,
             controller: 'loginModalController'//,
             //resolve: {
             //    credentials: function () {
             //        return $scope.credentials;
             //    }
             //}
         });
     };
 }]);

authApp.controller('loginModalController',
 ['$scope', '$modalInstance', 'AuthService',
 function ($scope, $modalInstance, AuthService) {
     //$scope.credentials = credentials;
     //$scope.headerTitle = 'Login Information';

     $scope.LoginUser = function () {
         //var data = {};
         //console.log($scope.credentials);
         AuthService.ValidateServerAccessDetails(data).then(function (response) {
             //$modalInstance.close(response.data);
         }, function (response) {
             //$scope.userName = "";
             //$scope.passWord = "";
         });
     };

     $scope.CancelLogin = function () {
         $modalInstance.dismiss('cancel');
     };
 }]);

And I am getting this error,

Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- loginModalController

I am also getting the same error in Plunker: https://plnkr.co/edit/3rmapgrLhYJ3plyPWm87

What am I doing wrong? Versions used are angularjs-1.4.7 and angularui-1.1.2

P.S: I checked many answers here. One of the question that came close was this one. Unknown provider: $modalInstanceProvider <- $modalInstance in Angularjs modal

Answer 1

Try changing the dependency to $uibModalInstance as used in the example in the documentation. Your controller would look like:

authApp.controller('loginModalController', [
    '$scope', '$uibModalInstance', 'AuthService',
     function ($scope, $uibModalInstance, AuthService) {
        // implementation
    }

Answer 2

thanks. i met some problem when i injected with "$modalInstance". Now i changed it to $uibModalInstance and remove ng-controller in my modal template. It worked!

When i was having problem, my code like below:

//======================navController=============================
app.controller('navController', function($http, $scope, $uibModal, $rootScope, $location) {
    $scope.loginDialog = function() {
        var modalInstance = $uibModal.open({
            templateUrl: 'views/login.html',
            controller: 'loginController',
        })

    };
});
//======================loginController=============================
app.controller('loginController', function($http, $scope, $modalInstance, $rootScope, $location) {

    $scope.closeLogin = function() {
        $modalInstance.dismiss('cancel');
    }

    //http://angular-ui.github.io/bootstrap/#/modal
    $scope.submit = function() {
        console.log("input user = >" + JSON.stringify($scope.user))
        $http({
            method: 'POST',
            url: '/auth/login',
            data: $scope.user
        }).then(function successCallback(response) {
            console.log(response)
            console.log(response.data.message)
            console.log(response.data.state)
            console.log(response.data.user)
            if (response.data.user === null) {
                $rootScope.isAuthenticated = false;
                $modalInstance.dismiss('cancel')
            } else {
                $rootScope.isAuthenticated = true;
                $modalInstance.dismiss('cancel')
            }
        }, function errorCallback(err) {
            console.log(err)
            $modalInstance.dismiss('cancel')
            $location.path('/error')
        });
    }

});


<form class="form-signin" id="loginForm" ng-model="user" ng-controller="loginController">
    <div style="margin:5px">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="user.username" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="user.password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" ng-click="submit()">Sign in</button>
        <button class="btn btn-lg btn-primary btn-block" ng-click="closeLogin()">Cancel</button>
    </div>
</form>
<!-- /container -->
<script>
$.validator.setDefaults({
    submitHandler: function() {
        alert('start signing...')
    }
});
$().ready(function() {
    $("#loginForm").validate();
});
</script>

Then i changed it to as below:

//======================navController=============================
app.controller('navController', function($http, $scope, $uibModal, $rootScope, $location) {
    $scope.loginDialog = function() {
        var modalInstance = $uibModal.open({
            templateUrl: 'views/login.html',
            controller: 'loginController',
        })

    };
});
//======================loginController=============================
app.controller('loginController', function($http, $scope, $uibModalInstance, $rootScope, $location) {

    $scope.closeLogin = function() {
        $uibModalInstance.dismiss('cancel');
    }

    //http://angular-ui.github.io/bootstrap/#/modal
    $scope.submit = function() {
        console.log("input user = >" + JSON.stringify($scope.user))
        $http({
            method: 'POST',
            url: '/auth/login',
            data: $scope.user
        }).then(function successCallback(response) {
            console.log(response)
            console.log(response.data.message)
            console.log(response.data.state)
            console.log(response.data.user)
            if (response.data.user === null) {
                $rootScope.isAuthenticated = false;
                $uibModalInstance.dismiss('cancel')
            } else {
                $rootScope.isAuthenticated = true;
                $uibModalInstance.dismiss('cancel')
            }
        }, function errorCallback(err) {
            console.log(err)
            $uibModalInstance.dismiss('cancel')
            $location.path('/error')
        });
    }

});


<form class="form-signin" id="loginForm" ng-model="user">
    <div style="margin:5px">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" ng-model="user.username" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="user.password" required>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> Remember me
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" ng-click="submit()">Sign in</button>
        <button class="btn btn-lg btn-primary btn-block" ng-click="closeLogin()">Cancel</button>
    </div>
</form>
<!-- /container -->
<script>
$.validator.setDefaults({
    submitHandler: function() {
        alert('start signing in...')
    }
});
$().ready(function() {
    $("#loginForm").validate();
});
</script>

removing 'ng-controller' in modal template and use $uiModalInstance fixed my problem.