AngularJS how to use promise and defer - angularjs

Question

I have this service:
angular.module('taskModule').service('myService', ['$modal', '$q', myService]);
function myService($modal, $q) {
this.displayModal = function(data) {
return $q(function(resolve, reject) {
$modal.open({
templateUrl: 'taskModule/taskModule/modal.tpl.html',
controller: function() {
this.datas = data;
this.buttonAction = function(id) {
console.log(id);
};
},
controllerAs: 'myCtrl'
});
});
};
}
What should I add to this code to see in console
You clicked the button ok
OR
You clicked the button Cancel
When I call this modal with this code:
myService.displayModal({
title: "This is a modal window",
message: "Please click a button.",
buttons: [{
id: 'ok',
label: 'OK'
}, {
id: 'cancel',
label: 'Cancel'
}, ]
}).then(function(buttonId) {
console.log('You clicked the button', buttonId);
});
Maybe I should use $q.defer(); but I'm novice in AngularJS.

Answer 1

The $modal.open function returns a modal instance which already has a promise that resolves/rejects when the modal is closed/dismissed, so you can just return that promise instead of creating a new one.
To return a value with a promise, you can call close/dismiss with that value - updated below.
function myService($modal, $q) {
this.displayModal = function(data) {
var modalInstance = $modal.open({
templateUrl: 'taskModule/taskModule/modal.tpl.html',
controller: function() {
this.datas = data;
this.buttonAction = function(id) {
console.log(id);
modalInstance.close(id);
};
},
controllerAs: 'myCtrl'
});
return modalInstance.result;
};
}