Rotate Cropped Image using Angular Directive

Rotate Cropped Image using Angular Directive

I use jcrop to crop an image and below is the directive I use to utilize
the jcrop library. HOw do I rotate the image? I rotated the div around the
image already but instead I want to rotate the actual jcrop image itself.
How do I do that ? Thanks
directive.js
. directive('imgCropped', function() {
return {
restrict: 'E',
replace: true,
scope: {src: '@', selected: '&'},
link: function(scope, element, attr) {
var myImg;
var clear = function() {
if (myImg) {
myImg.next().remove();
myImg.remove();
myImg = undefined;
}
};
scope.$watch('src', function(nv) {
clear();
if (nv) {
element.after('<img degrees="angle" rotate/>');
myImg = element.next();
myImg.attr('src', nv);
$(myImg).Jcrop({
trackDocument: true,
onSelect: function(x) {
/*if (!scope.$$phase) {
scope.$apply(function() {
scope.selected({cords: x});
});
}*/
scope.selected({cords: x});
},
keySupport: false,
trueSize: [1,1],
aspectRatio: 1,
boxWidth: 400, boxHeight: 400,
setSelect: [0, 0, 400, 400]
}, function(){
jcrop_api = this;
});
//$(myImg).rotate(90);
}
});
scope.$on('$destroy', clear);
}
};
})
index.html
<div rotate degrees="angle" class="cropping-box">
<img-cropped
src='{{baseurl_api}}photo/retrieve_temp_photo'
selected='selected(cords)'/>
</div>