title: Angular modal return promise
body: <p>I'd like to present the user with a popup warning modal before they perform an action (<strong>delete</strong> in this case). If they click <code>okay</code> in the modal, it'll proceed, if they click <code>cancel</code>, it'll do something else.</p>
  
  <p>To do this, I'm trying to pass the modal promise along the chain back to the initial calling <code>$rootScope.openDirections('warning').then(...</code> so I can decide what to do there.</p>
  
  <p>However I'm getting error:</p>
  
  <p><strong>$rootScope.openDirections(...).then is not a function</strong> <code>at Scope.$scope.deleteObj</code></p>
  
  <p>Telling me that the promise is not being returned:</p>
  
  <pre><code>    $scope.deleteObj = function (id, type) {
          $rootScope.openDirections('warning').then(function (res) {
              // Do Stuff
          }, function (err) {
              console.log('ERROR', err);
          });
  </code></pre>
  
  <p>This calls a $rootScope function: (I see that the object type here is a promise... so shouldn't it be able to return now to the original caller?)</p>
  
  <pre><code>    $rootScope.openDirections = function (type) {
          // A Promise: Object {result: Promise, opened: Promise, rendered: Promise}
          return Modal.showDirections(type);
      };
  </code></pre>
  
  <p>Which calls <code>Modal</code> factory to open directions modal:</p>
  
  <pre><code>     return {
              ...
              showDirections: function(type) {   
                  return $modal.open({
                      backdrop: 'static',
                      templateUrl: 'modal.html',
                      controller: 'directionsCtrl',
                      resolve: {
                          // Display custom modal template
                          obj: function () {
                              if (type === 'markdown') {
                                  return {
                                      template: '/modals/directions.html'
                                  };
                              } else {
                                  return {
                                      template: '/modals/message.html'
                                  };
                              }
                          },
                          testID : function () {
                              return 'WHAT DO I RETURN HERE?';
                          }
                      }
                  });
              }
  </code></pre>
  
  <p>Which renders <code>message.html</code> modal template:</p>
  
  <pre><code>&lt;div class="admin-directions"&gt;
      &lt;div class="directions"&gt;
          ARE YOU SURE YOU WANT TO DELETE THIS?
      &lt;/div&gt;
      &lt;p class="dismiss-admin-help" ng-click="okay()"&gt;Okay&lt;/p&gt;
      &lt;p class="dismiss-admin-help" ng-click="cancel()"&gt;Cancel&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Which uses <code>directionsCtrl</code> for the Modal:</p>
  
  <pre><code>angular
      .module('DDE')
      .controller('directionsCtrl', ['$rootScope', '$scope', '$modalInstance', 'Modal', 'obj', 'Auth', 'VARS', '$route', '$location', 'testID',
          function ($rootScope, $scope, $modalInstance, Modal, obj, Auth, VARS, $route, $location, testID) {
  
              $scope.template = obj.template;
  
              $scope.testID = '';
  
              /**
               * Dismiss modal
               */
              $scope.ok = function() {
                  $scope.testID = 'okay';
                  return $modalInstance.result($scope.testID);
              };
  
              $scope.cancel = function() {
                  $scope.testID = 'cancel';
                  return $modalInstance.result($scope.testID);
              };
  
      }]);
  </code></pre>