Cannot inject $uibModal in the angularjs Controller? - angularjs

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">×</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?

Answer 1

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>