title: Angular Directives watching external models
body: <p>In learning Angular I am creating a simple gallery that can be zoomed.  My initial implementation used a simple ng-repeat, but I quickly discovered that based on the zoom of the gallery I would want to change things like the url source (from small to medium thumbs), and probably the css on captions etc.  </p>
  
  <pre><code>&lt;div class="photoHolder" ng-repeat="photo in photos | filter:{caption:query} | orderBy:orderProp" ng-attr-style="transition: .3s ease; width: {{thumbWidth}}px; height: {{thumbWidth}}px;"&gt;
      &lt;div class="photoClass" data-id="{{photo.id}}" ng-attr-style="background-image:url({{zoomSize &lt; 5 ? photo.thumb_url : photo.medium_url}})"&gt;&lt;/div&gt;
      &lt;div class="caption"&gt;{{photo.caption}}&lt;/div&gt;
      &lt;div class="caption"&gt;{{photo.date}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So, I switched to a much cleaner directive:</p>
  
  <pre><code>&lt;gal-photo class="photoHolder" ng-repeat="photo in photos | filter:{caption:query} | orderBy:orderProp"/&gt;  
  </code></pre>
  
  <p>but the only way I could get the directive element to respond to the zoom change is to add a watch to the zoom inside the link for the element:</p>
  
  <pre><code>link: function(scope, element, attrs) {
      var image = new Image();
      scope.photo.url = scope.zoomSize &lt; 5 ? scope.photo.thumb_url : scope.photo.medium_url;
      scope.$watch('thumbWidth', function() {
             scope.photo.url = scope.zoomSize &lt; 5 ? scope.photo.thumb_url : scope.photo.medium_url;
          element.attr('style',  'transition: .3s; width: ' + scope.thumbWidth + 'px; height: ' + scope.thumbWidth + 'px;');
      });
  }
  </code></pre>
  
  <p>I know that you aren't supposed to abuse watches, and my fear is that with 500 elements in the gallery you are doing 500 watches.  But I can find no guidance on responding to external inputs within repeating directives. The two galleries seem to perform about the same, but I am wondering if I am doing this wrong?  Here is a fiddle for the <a href="http://jsfiddle.net/ksoncan34/j3wGa/2/">original gallery</a> and a fiddle for the <a href="http://jsfiddle.net/ksoncan34/hRaH9/3/">directive version</a>.</p>