You are mostly there. The problem is in the way you coded the loadData
function. Since you are doing an asynchronous call you can't just do a return of data like that. Instead, what you can do is in your loadData
you can call a function on the modalInstance that will set a value in the $scope of the modal.
So in your ModalInstanceCtrl you can add a function like this:
$modalInstance.setMyData = function(theData) {
$scope.mydata = theData;
};
And then you can call that in your loadData like this:
$scope.loadData = function(aModalInstance) {
$log.info("starts loading");
$timeout(function() {
$log.info("data loaded");
aModalInstance.setMyData("data loaded...");
}, 3000);
};
You also need to make sure that you pass the instance of the modal when you call loadData:
modalInstance.opened.then(function() {
$scope.loadData(modalInstance);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
I created an updated plunk so you can see how it works: http://plnkr.co/edit/M7qfegYIOqOQekoxLaj5?p=preview