title: Angular-ui modal, sending data into modal controller from $http
body: <p>I'm using the angular-ui modal directive <a href="http://angular-ui.github.io/bootstrap/" rel="noreferrer">http://angular-ui.github.io/bootstrap/</a> .</p>
  
  <p>I have followed the example from the link above.</p>
  
  <p>This is my data I want to send from my controller:</p>
  
  <pre><code>ProductsFactory.getOneProduct().then(function(d){
    $scope.selectedProduct = d.data;
  });
  
  $scope.open = function () {
    var modalInstance = $modal.open({
      controller: 'ModalInstanceCtrl',
      templateUrl: 'productDetail.html',
      resolve: {
        items: function () {
          return $scope.selectedProduct;
        }
      }
    });
  };
  </code></pre>
  
  <p>And this is my modal controller:</p>
  
  <pre><code>var ModalInstanceCtrl = function ($scope, $modalInstance, selectedProduct) {
  
    console.log(selectedProduct);
  
    $scope.ok = function () {
      $modalInstance.close();
    };
  
    $scope.cancel = function () {
      $modalInstance.dismiss('cancel');
    };
  };
  </code></pre>
  
  <p>Problem is i can't access the "selected product" in my Modal controller. I know the reason is something to do width asyncrnous call and it can only be access from the GUI. But how do I solve this issue? How do i send the "$scope.selectedProduct" to my ModalInstanceCtrl?</p>