Attributes in custom modal directive not resolved - angularjs

Question

I created a custom directive to display a ui.bootstrap modal and I cannot populate the dialog with the values I want. I don't understand why is it not working. I checked other questions and posts but I could not find and example suitable for my case.
I've created a plunker with a similar version of my real code to show the problem.
In the example, I am using a button to launch the modal but in my application I am doing it by code when some conditions are satisfied.
This is the link http://plnkr.co/edit/7CCV7uHHj7SrWbsp1PRJ
Basically I have a directive:
var app = angular.module('app', ['ui.bootstrap']);
app.directive('revModal', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
id: "#",
title: "#",
size: "#",
bodyMessage: '#',
acceptButton: '#',
dismissButton: '#'
},
controller: function($scope, $modal) {
$scope.title = $scope.title ? $scope.title : "Alert";
$scope.size = $scope.size ? $scope.size : "sm";
$scope.acceptButton = $scope.acceptButton ? $scope.acceptButton : "OK";
$scope.dismissButton = $scope.dismissButton ? $scope.dismissButton : "Cancel";
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modalAlert.html',
animation: true,
backdrop: true,
windowClass: 'app-modal-window',
size: $scope.size,
resolve: {
acceptButton: $scope.acceptButton,
dismissButton: $scope.dismissButton
}
});
modalInstance.result.then(function() {}, function() {
console.log('Modal dismissed at: ' + new Date());
});
};
},
link: function($scope, element) {
element[0].open = function() {
return $scope.openModal();
}
}
}
});
In the directive I've also tried to resolve the values using function but it didn't work either.
resolve:{
dismissButton: function(){return $scope.dismissButton}
...
}
The directive template is the following, and my problem is that the values inside curly braces are not replaced. The logic to link the ng-click functions was not done yet.
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
{{bodyMessage}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="acceptModal()">{{acceptButton}}</button>
<button class="btn btn-warning" ng-click="dismissModal()">{{dismissButton}}</button>
</div>
To use this directive I just insert the following tag in the html:
<div ng-controller="TimeRangeModalController">
<rev-modal id="timeRangeModal" title="test" accept-button="acepto" dismiss-button="calcelo" body-message="cuerpo"></rev-modal>
</div>
The controller to open the modal is:
var app = angular.module('app');
app.controller('TimeRangeModalController', function($scope, $document) {
$scope.open= function(modalId){
if (undefined !== modalId) {
var modal = $document[0].getElementById(modalId);
if (null !== modal) {
modal.open();
} else {
console.error('DOM element with id ' + 'modalId' + 'does not exist');
}
}
}
});
Any suggestion on how should I resolve the values to populate the modal?
Thanks and regards, Daniela.

Answer 1

Finally I've discovered the issue, I was missing to set the scope in the modalInstance.
The final open modal function will be:
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modalAlert.html',
animation: true,
backdrop: true,
windowClass: 'app-modal-window',
size: $scope.size,
scope:$scope
});
Note also that the resolve clause is not need it.
I've updated the Plunkr http://plnkr.co/edit/7CCV7uHHj7SrWbsp1PRJ