title: Directive applied after filter (or bound to filtered result so Directive is called again)
body: <p>See <a href="https://jsfiddle.net/gagere/en1pg6od/" rel="nofollow">fiddle</a> with html:</p>
  
  <pre><code>&lt;div get-width class="output"&gt;{{ inputText | uppercase }}&lt;/div&gt;
  </code></pre>
  
  <p>And directive:</p>
  
  <pre><code>myApp.directive('getWidth', [function () {
    function link(scope, element, attrs) {
      scope.textSize = getTextWidth(element.text(), "95px Arial");
    }
  
    return {
      restrict: 'A',
      link: link
    };
  }]);
  </code></pre>
  
  <p>Trying to have a directive calculate the width of text after all other child directives have been applied and filters have been applied.  Unfortunately it always seems that the filters apply after directives.  The width calculation is always run on "{{inputValue | uppercase}}" instead of on the evaluated values.</p>
  
  <p>I'd be fine if the filter applied afterwards, but then caused the directive to be re-evaluated because the element changed.  But I don't seem to be able to get the directive to bind to the element.</p>
  
  <p>I'd prefer not to pass everything using arguments or pass the $filter service in and manually filter the input before calculating the width as I don't know what filters may be used.  This directive may be used by other developers (it's just an example for now) and so it could contain any input and any number of chained filters.  Is there a way evaluating the element before running getTextWidth()?</p>
  
  <p>This function may be used to adjust elements in the page so I would like to avoid $timeout and causing extra paints (flicker).</p>
  
  <p>Any help would be appreciated.</p>