Modal in Angular does not work. Unhandled rejection {}

Question

I want to create a modal (dialog). I have followed examples on official bootstrap documentation but I stuck. When I am trying to create modal I receive an error

angular.min.js:122 Possibly unhandled rejection: {}

mainController:

 angular
.module('app')
.controller('tlmController', function($scope, $http, $timeout, $uibModal,         DTOptionsBuilder, DataLoader, TestLines) {
    $scope.openTestLineDetails = function(id) {
        var modalInstance = $uibModal.open({
            size: 'lg',
            controller: 'testlineDetailsController',
            templateUrl: 'app/client/layout/testlinedetails.tpl.html',
            resolve: {
                testLineId: function() {
                    return id;
                }
            }
        });
    };
 })

and TestlineDetailsController:

angular
.module('app')
.controller('testlineDetailsController', function($scope, $modalInstance, testLineId) {


});

What is wrong with this code? I am using $uibModal ($modal service does not exist) in main controller. When I replace $modalInstance by $uibModalInstance I receive an error too (service $uibModalInstance does not exist), so I have to use $uibModal with $modalInstance. Strage but true.

Answer 1

you can write below code in app.config

app.config(['$qProvider', function ($qProvider) {
    $qProvider.errorOnUnhandledRejections(false);
}]);

Answer 2

First of all, check your modal controller script is appended to the main HTML file and if its appended(appears) in the browser (In Chrome, open web developer tools with F12 keyboard button then open the "Elements" tab button) (This is in case you are using some scaffolding tool like generator-angular from Yeoman's team, remember to clear cache in order to get the latest update from your code), because I had the same problem :( and I was reviewing constantly what was wrong with my code then I found out that the browser was not appending the latest script I made (Modal controller), so my code was like yours, but taking your code example:

<!-- In your index.html file, check for this script being appended in your browser -->
<script src="testlineDetailsController.js"></script>

//In your parent controller
angular
.module('app')
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) {
    $scope.openTestLineDetails = function(id) {
        var modalInstance = $uibModal.open({
            size: 'lg',
            controller: 'testlineDetailsController',
            templateUrl: 'app/client/layout/testlinedetails.tpl.html',
            resolve: {
                testLineId: function() {
                    return id;
                }
            }
        });
    };
 })

Secondly, make sure you are implementing at least one method from the modal instance service in the modal controller: EDIT: (This is optional, you can hide the modal using the backdrop property from the modal option object)

//In your modal controller
angular.module('app').
controller('testlineDetailsController', function ($scope, $uibModalInstance, testLineId) {
            //In case you have the ok and cancel buttons in your modal template
            $scope.id = testLineId;
            $scope.ok = function () {
              $uibModalInstance.close();
            };

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

After this, your app should be working.

Now, there is another alternative to get this issue solved, you can directly write the controller function in the property of the modal options object:

//In your parent controller
angular
.module('app')
.controller('tlmController', function($scope, $http, $timeout, $uibModal, DTOptionsBuilder, DataLoader, TestLines) {
    $scope.openTestLineDetails = function(id) {
        var modalInstance = $uibModal.open({
            size: 'lg',
            //write an anonymous function instead of naming the controller name.
            controller: function ($scope, $uibModalInstance, testLineId) {
              $scope.id = testLineId;
              $scope.ok = function () {
                $uibModalInstance.close();
              };
              $scope.cancel = function () {
                $uibModalInstance.dismiss('cancel');
              };
            },
            templateUrl: 'app/client/layout/testlinedetails.tpl.html',
            resolve: {
                testLineId: function() {
                    return id;
                }
            }
        });
    };
 })

This alternative should work also in your app. So I hope this explanation helps you to solve the issue you have.