Can someone help me with a simple example using Angular UI Bootstrap modal service? I am having trouble with model binding as the expected "Doing something..." message is not displaying on the modal dialog, instead "{{message}}" is shown. What changes do I need to make?
Check out the example here: http://plnkr.co/edit/fJhS3e7At11tJTuNSWAB?p=preview
The modal HTML appears as follows:
<div ng-app="myModule">
<div ng-controller="modalInstanceController" class="modal-body">
<div>{{message}}</div>
</div>
</div>
Below are the module and controller definitions:
var myAppModule = angular.module('myModule', ['ui.bootstrap']);
myAppModule.controller('modalInstanceController', function ($scope, $modalInstance, message) {
var vm = this;
vm.message = message;
});
myAppModule.controller('myController', function ($scope, $modal) {
$scope.open = function open() {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
backdrop: 'static',
//windowClass: 'custom-modal-wait',
dialogFade: false,
keyboard: false,
controller: 'modalInstanceController',
resolve: {
message: function () {
return "Doing something ...";
}
}
});
setTimeout(function(){
modalInstance.close('close');
},5000);
}
});