title: Automatically resizing font-size in ng-repeat
body: <p>I am currently trying to resize font-size to fit inside a fixed size div. I found this interesting piece of javascript code doing the job very well</p>
  
  <pre><code>      $('#defect-text div').css('font-size', '1em');
  
              while ($('#defect-text div').height() &gt; $('#defect-text').height()) {
                  $('#defect-text div').css('font-size', (parseInt($('#defect-text div').css('font-size')) - 1) + "px");
              }
  </code></pre>
  
  <p>For the following HTML code</p>
  
  <pre><code>&lt;div ng-repeat="defect in surface.defects" class="new-page"&gt;
             &lt;div id="defect-text"&gt;
                                      &lt;div&gt;
                                          &lt;div id="defect-title"&gt;{{ 'TYPE' | translate }}:&lt;/div&gt;
                                          {{ defect.type }}
                                          &lt;div id="defect-title"&gt;Emplacement du défaut:&lt;/div&gt;
                                          {{ defect.location }}
                                          &lt;div id="defect-title"&gt;Dimension du défaut:&lt;/div&gt;
                                          {{ defect.dimension }}
                                          &lt;div id="defect-title"&gt;Actions suggérées:&lt;/div&gt;
                                          {{ defect.future_operation }}
                                          &lt;div id="defect-title"&gt;Détail technique du défaut:&lt;/div&gt;
                                          {{ defect.description }}&lt;/div&gt;
                                  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>However, since the different div are inside an ng-repeat expression, my piece of javascript code will resize the font of every container with the desired size of the first one. Is there a way to change to code to select the current element of the ng-repeat and change only it's own css to fit the container?</p>
  
  <p>thanks in advance</p>