title: How to call an api to show the response inside an angular modal
body: <p>I have a list of nodes showing on my home and when you click on the title of one node, a modal should be opened to display that node's detail, I'm working this way:</p>
  
  <pre><code>var eventsApp = angular.module('EventsApp.controllers', ['infinite-scroll','ui.bootstrap','ngRoute']);
  eventsApp.controller('eventsController', ['$scope','$modal','eventsAPIservice', function($scope, $modal, eventsAPIservice){
      $scope.openModal = function(id, size, animationsEnabled){
              var modalInstance;
              modalInstance = $modal.open({
                  animation: animationsEnabled,
                  templateUrl: 'templates/eventModal.html',
                  controller: 'eventModalInstanceController',
                  size: size,
                  resolve: {
                      event: function(){
                          /* Here I make the call to the api */
                          eventsAPIservice.getEventById(id).success(function(response){
                              console.log(response);
                              return response;
                          });
                      }
                  }
              });
      };
  }]);
  </code></pre>
  
  <p>And the modal instance is this:</p>
  
  <pre><code>eventsApp.controller('eventModalInstanceController', ['$scope', '$modalInstance', 'event', function($scope, $modalInstance, event){
  
      $scope.eventDetail = event;
      console.log(event);
      $scope.save = function(param){
          console.log(param);
      };
  
      $scope.cancel = function(){
          $modalInstance.dismiss('cancel');
      };
  }]);
  </code></pre>
  
  <p>The problem is that when I <strong>console.log(response)</strong> on the resolve, it show correctly the data, but it it's not passed correctly to <strong>eventModalInstanceController</strong> as the parameter 'event', so when I <strong>console.log(event)</strong> it shows undefined on console.</p>
  
  <p>My modal template is this:</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
    &lt;h3 class="modal-title"&gt;{{ eventDetail.title }}&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;p&gt;{{ eventDetail.eid }}&lt;/p&gt;
    &lt;p&gt;{{ eventDetail.description }}&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button class="btn btn-primary" ng-click="ok()"&gt;OK&lt;/button&gt;
    &lt;button class="btn btn-warning" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My question is where do I have to make the API call and how should I pass it to the instance controller</p>