Proper image orientation in AngularJS 1.5 project - css

Question

Landscape images taken from iPhone appear upside down on Desktop Chrome, but proper orientation on iPhone Safari. An example is the car on the homepage https://www.dapidi.com/#/
I doubt the problem is with the browsers or devices. After searching for an answer I came across this directive which seems to work most times, but not for the image of this car. I believe this should be a "solved problem" already, but I cannot seem to find an answer. Anyone have a solution how to solve this surely common dilemma?
DIRECTIVE
angular.module('myApp')
.directive('imgOrientation', function(){
return {
restrict: 'A',
link: function(scope, element/*, attrs*/) {
function setTransform(transform) {
element.css('-ms-transform', transform);
element.css('-webkit-transform', transform);
element.css('-moz-transform', transform);
element.css('transform', transform);
}
var parent = element.parent();
$(element).bind('load', function() {
EXIF.getData(element[0], function() {
var orientation = EXIF.getTag(element[0], 'Orientation');
var height = element.height();
var width = element.width();
if (orientation && orientation !== 1) {
switch (orientation) {
case 2:
setTransform('rotateY(180deg)');
break;
case 3:
setTransform('rotate(180deg)');
break;
case 4:
setTransform('rotateX(180deg)');
break;
case 5:
setTransform('rotateZ(90deg) rotateX(180deg)');
if (width > height) {
parent.css('height', width + 'px');
element.css('margin-top', ((width -height) / 2) + 'px');
}
break;
case 6:
setTransform('rotate(90deg)');
if (width > height) {
parent.css('height', width + 'px');
element.css('margin-top', ((width -height) / 2) + 'px');
}
break;
case 7:
setTransform('rotateZ(90deg) rotateY(180deg)');
if (width > height) {
parent.css('height', width + 'px');
element.css('margin-top', ((width -height) / 2) + 'px');
}
break;
case 8:
setTransform('rotate(-90deg)');
if (width > height) {
parent.css('height', width + 'px');
element.css('margin-top', ((width -height) / 2) + 'px');
}
break;
}
}
});
});
}
};
});

Answer 1

User error. I had a typo in the directive attribute name in the HTML.
Was: img-fix-orientation
Should have been: img-orientation
(face palm)
Forgot I had renamed it at some point.
The directive seems to work.