title: Angular call directive from controller
body: <p>I have the following directive for showing a popup to confirm an execution of a function on click. </p>
  
  <p>Now i would like to use it within my controller to show a popup if the properties of an object has been changed and the user wants to change the location without saving the object before. Is that possible?</p>
  
  <pre><code>angular.module('app.confirm', [
      'ui.bootstrap',
      'template/modal/confirm.html',
  ])
  
  .controller('ConfirmModalController', ['$scope', '$modalInstance', function($scope, $modalInstance) {
      $scope.confirm = function() {
          $modalInstance.close();
      };
  
      $scope.cancel = function() {
          $modalInstance.dismiss('cancel');
      };
  }])
  
  .directive('confirm', ['$modal', function($modal) {
      return {
          restrict: 'A',
          scope: {
              confirm: '&amp;',
              title: '@confirmTitle',
              message: '@confirmMessage',
              confirmButtonText: '@confirmButtonText',
              cancelButtonText: '@cancelButtonText'
          },
          link: function(scope, element, attributes) {
              element.bind('click', function() {
                  var modal= $modal.open({
                      controller: 'ConfirmModalController',
                      templateUrl: 'template/modal/confirm.html',
                      size: 'sm',
                      scope: scope
                  });
  
                  modal.result.then(function() {
                      scope.confirm();
                  }, function() {
                      // Modal dismissed
                  });
              });
          }
      };
  }]);
  
  angular.module('template/modal/confirm.html', []).run(['$templateCache', function($templateCache) {
      $templateCache.put(
          'template/modal/confirm.html',
          '&lt;div class="modal-header" ng-show="title"&gt;' + 
              '&lt;strong class="modal-title"&gt;{{title}}&lt;/strong&gt;' + 
          '&lt;/div&gt;' + 
          '&lt;div class="modal-body"&gt;' +
              '{{message}}' + 
          '&lt;/div&gt;' + 
          '&lt;div class="modal-footer"&gt;' +
              '&lt;a href="javascript:;" class="btn btn-link pull-left" ng-click="cancel()"&gt;{{cancelButtonText}}&lt;/a&gt;' + 
              '&lt;button class="btn btn-danger" ng-click="confirm()"&gt;{{confirmButtonText}}&lt;/button&gt;' +
          '&lt;/div&gt;'
      );
  }]);
  </code></pre>
  
  <p>You can use it like that:</p>
  
  <pre><code>&lt;button 
      confirm="delete(id)" 
      confirm-title="Really?"
      confirm-message="Really delete?"
      confirm-button-text="Delete"
      cancel-button-text="Cancel"
      class="btn btn-danger"
  &gt;
      Delete
  &lt;/button&gt;
  </code></pre>