Cannot inject $uibModal in the angularjs Controller?

Question

I know that similar questions have been asked and I have tried there answers but they have not worked for me, hence I'm asking new question, here is my code:

hbs:

<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

<title>UI</title>

<div ng-controller="appCtrl">
    <button type="button" ng-click="openModal()">Abc</button>
</div>

    <script type="text/ng-template" id="checklistModal.html">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="cancel()"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal</h4>
        </div>
        <div class="modal-body" id="modal-body">
        <div style="padding-left: 3%; padding-right: 3%; margin-bottom: 8%;">
            <div class="row">
            <div class="col-md-12">
                        <table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
                            <thead style="display:table;width:100%;table-layout:fixed;">
                                <tr>
                                    <th style="text-align:center;" width="15%"></th>
                                    <th style="text-align:center;" width="15%">Pending</th>
                                    <th style="text-align:center;" width="15%">Done</th>
                                </tr>
                            </thead>
                            <tbody style="display:block;height:164px;overflow:auto;">
                                <tr style="display:table;width:100%;table-layout:fixed;">
                                    <td style="text-align:center;">Task 1</td>
                                    <td style="text-align:center;"></td>
                <td style="text-align:center;"></td>
                                </tr>
                     </tbody>
                        </table>
                        <button class="btn btn-primary pull-right" ng-click="" style="float:right;">Save</button>
            </div>
            </div>
        </div>
        </div>
    </script>

And here is corresponding js:

var app = angular.module("demoApp", ['ui.bootstrap']);

app.controller("appCtrl",['$scope', '$uibModal', function($scope, $uibModal) {

'use strict';

$scope.openModal = function(){
        var parentElem = parentSelector ?
        angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;

        var modalInstance = $uibModal.open({
              ariaLabelledBy: 'modal-title',
              ariaDescribedBy: 'modal-body',
              templateUrl: "checklistModal.html",
              controller: 'ChecklistModalInstanceCtrl',
              scope: $scope,
              size: "lg",
              appendTo: parentElem,
              resolve: {

                }
            });

            modalInstance.result.then(function (selectedItem) {
              $ctrl.selected = selectedItem;
            }, function () {
            });

}

}]);

app.controller('ChecklistModalInstanceCtrl', function($scope) {

});

Error I get is: Unknown provider: $uibModalProvider <- $uibModal <- appCtrl

If, I change first line of js:

var app = angular.module("demoApp", []);

Error I get is: Failed to instantiate module demoApp

Answers to similar questions I found did not work, can anyone please help?

Sajeetharan Sajeetharan · Accepted Answer · 2018-05-06T11:07:29

You need to inject ui.bootstrap as a dependency to your module,

var app = angular.module('app',['ui.bootstrap']);

also add the reference as well

   <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

Cannot inject $uibModal in the angularjs Controller?

1 Answers