After spending an unhealthy amount of time on this issue, I finally managed to resolve it. Initially, the modal.open function was only darkening the screen without displaying any dialog box. However, by using windowTemplateUrl to override templateUrl, I was able to make the dialog box appear.
(function() {
angular
.module('loc8rApp')
.controller('locationDetailCtrl', locationDetailCtrl);
locationDetailCtrl.$inject = ['$routeParams', '$uibModal', 'loc8rData'];
function locationDetailCtrl($routeParams, $uibModal, loc8rData) {
var vm = this;
vm.locationid = $routeParams.locationid;
loc8rData.locationById(vm.locationid)
.success(function(data) {
vm.data = {
location: data
}
vm.pageHeader = {
title: vm.data.location.name
};
})
.error(function(e) {
console.log(e);
});
vm.popupReviewForm = function() {
var modalInstance = $uibModal.open({
templateUrl: "/reviewModal/reviewModal.view.html",
backdrop: true,
//windowClass: 'show',
windowTemplateUrl: "/reviewModal/reviewModal.view.html",
controller: 'reviewModalCtrl as vm',
//size: 'sm',
resolve: {
locationData: function() {
return {
locationid: vm.locationid,
locationName: vm.data.location.name
};
}
}
});
};
}
})();
//modal controller
(function() {
angular
.module('loc8rApp')
.controller('reviewModalCtrl', reviewModalCtrl);
reviewModalCtrl.$inject = ['$uibModalInstance', 'locationData'];
function reviewModalCtrl($uibModalInstance, locationData) {
var vm = this;
vm.locationData = locationData
//create vm.modal.cancel() method and use it to call $modalInstance.dismiss method
vm.modal = {
cancel: function() {
$uibModalInstance.dismiss('cancel');
}
};
}
})();<div class="container modal-content">
<form id="addReview" name="addReview" role="form" class="form-horizontal">
<div class="modal-header">
<button type="button" ng-click="vm.modal.cancel()" class="close"><span aria-hidden="true">x</span><span class="sr-only">Close</span></button>
<h4 id="myModalLabel" class="modal-title">Add your review for {{ vm.locationData.locationName }}</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-xs-2 col-sm-2 control-label">Name</label>
<div class="col-xs-10 col-sm-10">
<input id="name" name="name" required="required" ng-model="vm.formData.name" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="rating" class="col-xs-10 col-sm-2 control-label">Rating</label>
<div class="col-xs-12 col-sm-2">
<select id="rating" name="rating" ng-model="vm.formData.rating">
<option>5</option>
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
</select>
</div>
</div>
<div class="form-group">
<label for="review" class="col-sm-2 control-label">Review</label>
<div class="col-sm-10">
<textarea id="review" name="review" rows="5" required="required" ng-model="vm.formData.reviewText" class="form-control"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button ng-click="cancel()" type="button" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>