css update on resize with angularjs - angularjs

Question

I am trying to make a div that is a square, initialised at a width and a height of 25% of the width of the page. I want that the size of the div gets updated everytime i resize the browser to the right width and height. What am i doing wrong?
'use strict'
angular.module("cars4export.directives", []).directive('box', function($window) {
return {
restrict: "C",
link: function(scope, element, attrs) {
var width = $window.innerWidth * 0.25;
//initialising
element.css({
width: width,
height: width,
"font-size": width * 0.1,
paddingTop: width * 0.25,
paddingLeft: width * 0.3
});
//on resize
angular.element($window).bind('resize', function() {
element.css({
width: width,
height: width,
"font-size": width * 0.1,
paddingTop: width * 0.25,
paddingLeft: width * 0.3
});
scope.$apply();
})
}
}
})
.bleu {
background-color: #45619D;
color: white;
}
<div class="container-fluid" ng-controller="headerConfigController">
<div class="row">
<div class="col-md-3 bleu box">
<h4>Hello World</h4>
</div>
<div class="col-md-3">
</div><!--end logo-->
<div class="col-md-3">
</div><!--end menu-->
<div class="col-md-3">
</div><!--end newsletter-->
</div>
</div>