Unknown provider: $modalInstanceProvider <- $modalInstance Unknown provider: $modalInstanceProvider <- $modalInstance angularjs angularjs

Unknown provider: $modalInstanceProvider <- $modalInstance


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    }


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.