We had to update the Bootstrap version (bs3 to bs4). We have some issues with Angularjs modal.It only works in bs3.4.1 version not even 3.4.2. Below is a similar piece of code, the problem is, It looks like a template has been added to the dom, but the modal doesn't appear and behave like a modal. How can I solve this problem. Any help will be really appreciated.
<html>
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript">
var app = angular.module("app", ['ui.bootstrap']);
app.controller("democontroller", ["$scope", "$modal", function($scope, $uibModal){
$scope.click = function(){
$uibModal.open({
templateUrl: "modal.html",
controller: "modal",
scope: $scope
});
}
}]);
app.controller("modal", modal);
function modal() {
console.log("in modal controller")
}
</script>
</head>
<body>
<div ng-app="app" ng-controller="democontroller">
<button type="button" class="btn btn-default" ng-click="click()">
Open modal
</button>
<script type="text/ng-template" id="modal.html">
<h1>modal</h1>
</script>
</div>
</body>
</html>
