title: Attributes in custom modal directive not resolved
body: <p>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.</p>
  
  <p>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 <a href="http://plnkr.co/edit/7CCV7uHHj7SrWbsp1PRJ" rel="nofollow">http://plnkr.co/edit/7CCV7uHHj7SrWbsp1PRJ</a></p>
  
  <p>Basically I have a directive:</p>
  
  <pre><code>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();
        }
      }
    }
  });
  </code></pre>
  
  <p>In the directive I've also tried to resolve the values using function but it didn't work either.</p>
  
  <pre><code> resolve:{
       dismissButton: function(){return $scope.dismissButton}
       ...
      }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
        &lt;h3 class="modal-title"&gt;{{title}}&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        {{bodyMessage}}
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button class="btn btn-primary" ng-click="acceptModal()"&gt;{{acceptButton}}&lt;/button&gt;
        &lt;button class="btn btn-warning" ng-click="dismissModal()"&gt;{{dismissButton}}&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>To use this directive I just insert the following tag in the html:</p>
  
  <pre><code>&lt;div ng-controller="TimeRangeModalController"&gt;
      &lt;rev-modal id="timeRangeModal" title="test" accept-button="acepto" dismiss-button="calcelo" body-message="cuerpo"&gt;&lt;/rev-modal&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The controller to open the modal is:</p>
  
  <pre><code>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');
        }
      }
    }
  });
  </code></pre>
  
  <p>Any suggestion on how should I resolve the values to populate the modal?
  Thanks and regards, Daniela.</p>