AngularJS - ng-Style not changing when updated in the directive - css

Question

So, here is a custom directive to resize an element and it's contents based on a screen size change. I can see that the value of 'scalify' is changing how I would like it to, but the style itself is not changing. I know that the styles work when applied with static values directly in the css file.
.directive("card", function(){
return{
restrict : "E",
controller: function($scope, $element, $attrs){
var w = this;
window.onresize = function () {
$scope.scalify = {
'-ms-zoom': window.innerHeight/675,
'-moz-transform': 'scale(' + window.innerHeight/675 + ')',
'-o-transform': 'scale(' + window.innerHeight/675 + ')',
'-webkit-transform': 'scale(' + window.innerHeight/675 + ')'
};
$scope.$apply();
}
}
};
})
And here's how I use the ng-Style in the HTML
<card ng-style="scalify">
...
</card>

Answer 1

Hi please see here: http://run.plnkr.co/jfeF9NcPcGroNCsg/ probably you need to work a bit on your css transformation but style is changing when you change size of window as you wanted
app.directive("card", function($window) {
return {
restrict: "E",
link: function(scope, element, attrs) {
scope.onResizeFunction = function() {
//$scope.windowHeight = $window.innerHeight;
// $scope.windowWidth = $window.innerWidth;
var scalify = {
'-ms-zoom': $window.innerHeight / 675,
'-moz-transform': 'scale(' + $window.innerHeight / 675 + ')',
'-o-transform': 'scale(' + $window.innerHeight / 675 + ')',
'-webkit-transform': 'scale(' + $window.innerHeight / 675 + ')',
'background-color': 'red'
};
element.css(scalify);
console.log(element);
};
angular.element($window).bind('resize', function() {
scope.onResizeFunction();
scope.$apply();
});
}
}
});