title: Custom Angular directive to dynamically change font size?
body: <p>I have some content on my site that doesn't format well because different browsers/screens render the font-size a little differently. To counteract this, I'm attempting to use Angular to get the height of some <code>&lt;p&gt;</code> tags, and if they're taller than my layout allows, lower their font size.</p>
  
  <p>The <code>&lt;p&gt;</code> tags I'm trying to manipulate are contained in a directive which generates multiple content boxes based on some JSON.</p>
  
  <p>I have created this directive:</p>
  
  <pre><code>spaModule.directive ("resizeParagraph", function() {
      return function (scope, element, attrs) {
          while (element.height() &gt; 400) {
              element.css("font-size", (parseInt(element.css("font-size")) -1 + "px"));
          }
      }
  });
  </code></pre>
  
  <p>This is the directive which creates those boxes (this works):</p>
  
  <pre><code>&lt;div ng-repeat="data in homeCtrl.homeData" class="content-box"&gt;
  &lt;img class="content-image" ng-src="images/home/{{ data.imageSrc }}"/&gt;
    &lt;div class="sub-content"&gt;
      &lt;h1&gt;
        {{ data.heading }}
      &lt;/h1&gt;
      &lt;p resize-paragraph class="large-text"&gt;
        {{ data.body }}
      &lt;/p&gt;
      &lt;a ng-href="#/{{ data.linkUrl }}" class="box-link"&gt;
        {{ data.linkValue }}
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm at home creating custom directives with a source URL, but this is my first go at creating a logical attribute-based directive. </p>
  
  <p>What have I done wrong?</p>