How do I open a modal using bootstrap in angular? - angularjs

Question

I am trying to create a simple chat room web app. I am trying to bootstrap a modal to angular to include a create new room button. I followed the documentation and followed the sample code but when I tried to run it, the modal would not open. What am I missing? Here is the template and controller.
(function() {
function ModalCtrl($uibModal, Room) {
//this.newRoom = Room.addRoom();
$uibModal.open({
templateUrl: 'app/templates/modal.html',
controller: 'ModalCtrl as $modal'
})
}
angular
.module('blocChat')
.controller('ModalCtrl', ['Room', ModalCtrl]);
})();
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>

Answer 1

Try
(function() {
function ModalCtrl($uibModal, Room) {
//this.newRoom = Room.addRoom();
$scope.open=function(){
angular.element('#myModal').modal('show');
};
}
angular
.module('blocChat')
.controller('ModalCtrl', ['Room', ModalCtrl]);
})();
<div id="myModal" class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
<button class="btn btn-primary" ng-click="open()">New Room</button>

Answer 2

$uibModal dependency needs to be injected into ModalCtrl controller, like this:
angular
.module('blocChat')
.controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);
where
function ModalCtrl($uibModal, Room) {
//...
}
Example
(function () {
function ModalCtrl($uibModal, Room) {
var $modal = this;
//this.newRoom = Room.addRoom();
$modal.open = function () {
$uibModal.open({
templateUrl: 'app/templates/modal.html',
controller: 'ModalCtrl as $modal'
});
};
}
angular
.module('blocChat', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.factory('Room', function () {
return {
addRoom: function () {
console.log('add room');
}
};
})
.controller('ModalCtrl', ['$uibModal', 'Room', ModalCtrl]);
})();
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.4.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="blocChat" ng-controller="ModalCtrl as $modal">
<script type="text/ng-template" id="app/templates/modal.html">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create new room</h3>
</div>
<div class="modal-body">
<p>modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</script>
<button class="btn btn-primary" ng-click="$modal.open()">New Room</button>
</div>