title: Creating a directive for window resizing
body: <p>I have four <em>mostly</em> square looking charts which I need to resize on window resize. I have created a directive as below inside my angular controller at the top. This doesn't seem to work as the directive seem to executing as soon as the page loads and nothing seems to happen on resize. What am I missing here?</p>
  
  <pre><code>targetApp.directive('rsz', function ($window) {
      return function (scope, element) {
          var w = angular.element($window), 
              iw = w.innerWidth,
              ih = w.innerHeight;
  
          //resizing relative to the this parent container 
          scatterParentDimensions = getoffsetDimensions('#scatter-container'),
          expectedWidth, expectedHeight;
  
          console.log('rel w:', scatterParentDimensions.width, 'rel h:', scatterParentDimensions.height);
  
          if (iw &gt; ih) {
              expectedWidth = scatterParentDimensions.width / 2;
              expectedHeight = (scatterParentDimensions.height &lt; iw)
                  ? scatterParentDimensions.height / 2
                  : scatterParentDimensions.height / 4;
          }
          else {
              expectedWidth = iw / 2;
              expectedHeight = ih - 50;
          }
  
          // this is returning NaN as soon as the page is loaded.
          console.log('set w:', expectedWidth, 'set h:', expectedHeight);
  
          var selector = "#" + element.id;
          if ($(selector).highcharts()) {
              chart = $(selector).highcharts();
              chart.setSize(expectedWidth, expectedHeight, false);
          }
  
          w.bind('resize', function () {
              scope.$apply();
          });
      }
  })
  </code></pre>
  
  <p>I have added the directive <code>rsz</code> on the four charts that need resizing.</p>
  
  <pre><code>//scatter.html
  &lt;div id="target-charts"&gt;
      &lt;div id="scatter-container" class="col-sm-8"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="scatter-chart"&gt;
                      &lt;div class="chart-body" rsz id="scatterA"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="scatter-chart"&gt;
                      &lt;div class="chart-body" rsz id="scatterB"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="scatter-chart"&gt;
                      &lt;div class="chart-body" rsz id="scatterC"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div class="scatter-chart"&gt;
                      &lt;div class="chart-body" rsz id="scatterD"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Definition for getOffsetDimensions</p>
  
  <pre><code>function getoffsetDimensions(selector) {
      var el = document.querySelector(selector);
      return {
          width: el.offsetWidth,
          height: el.offsetHeight
      }
  }
  </code></pre>