title: Toggling between templates displayed by an angular directive
body: <p>I have an angular app that shows a list of things</p>
  
  <pre><code>&lt;div ng-repeat="thing in things" regular-thing&gt;
  </code></pre>
  
  <p>implemented with an ng-repeat that shows a <code>regularThing</code> directive for each thing in my list. </p>
  
  <p>It's actually a little bit trickier than that though: </p>
  
  <pre><code>&lt;div ng-repeat-start="thing in things"&gt;
      &lt;div ng-if="$first || thing.isSpecial" special-thing&gt;&lt;/div&gt;
      &lt;div ng-if="!$first &amp;&amp; !thing.isSpecial" regular-thing&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div ng-repeat-end&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I use a different directive for the first thing in my list, and also for any "special" things. For our purposes, a thing becomes "special" when the user clicks on it - so, as they're scrolling through the list, they can click on a thing to have it displayed in a different (more extensive) template. </p>
  
  <p>The way I have it now feels wrong to me. For one thing, I really don't need to have two different directives - just different templates. The logic is identical, <code>specialThing</code> just has a bit more of it. For another thing, I'm toggling a property on the <strong>data</strong> (namely <code>thing.isSpecial</code>) for purely view-related reasons, which makes me die a little bit inside. </p>
  
  <p>So my question: Don't I deserve to die a little bit inside for this? Isn't there a cleaner, more "angular" way to handle this (i.e. to toggle between the directive templates)? </p>