AngularJs - Modal dialog that embed views by ui-view - angularjs

Question

My goal is to have a modal view with couple of buttons and a ui-view. When clicking one of those buttons it will load the specific view + controller.
Reading from the angular-ui router project (https://github.com/angular-ui/ui-router/wiki) they control ui-views with states. How could I do that with a modal?
Below you can get a better idea of what i am aiming for. I tried also using states (abstract state to load layout template with buttons leaving a ui-view directive) but it didnt work. Any ideas on how to organize the code to accomplish it?
This is the code to launch the modal view:
$scope.launchModalView = function(data){
var modalInstance = $modal.open({
controller: 'coversModalController',
size: 'lg',
templateUrl: 'partials/covers.modal.html',
resolve: {
data: function(){
return data;
}
}
});
modalInstance.result.then(function (data) {
console.log('Got it! Song = ' + JSON.stringify(data));
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
Here the coversModalController:
admintoolApp.controller('coversModalController',function($scope, $modalInstance, data){
// Modal functionality
$scope.data = data;
$scope.submit = function () {
$modalInstance.close($scope.data);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
Here we have the template "partials/covers.modal.html":
<div class="modal-header">
<h3 class="modal-title">Select one method to choose images</h3>
</div>
<div class="modal-body" style="overflow: hidden;">
<div style="float:left;">
<ul>
<li>From Private Library</li>
<li>From External Resource</li>
<li>Upload image</li>
</ul>
</div>
<div style="float:left;" ui-view>
<h4>Choose one of the options from your left</h4>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="submit()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>