css update on resize with angularjs

问题

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>

来源：https://stackoverflow.com/questions/30561615/css-update-on-resize-with-angularjs