title: angularJS templating, proper use of directives or alternatives?
body: <p>In my app, I have a main controller as usual.
  Let's say it's a webshop with different products and I want to compare X products. The HTML to display 1 product, is re-usable for all other products that get compared.</p>
  
  <p>This means this HTML should be in a template (this is the point where I would've used Handlebars in a jQuery driven app).</p>
  
  <p>I created a partial called <code>itemDetails.php</code>.</p>
  
  <p>This template needs to get inserted into my view - let's say: - two times with different data (normally that'd be the model but in Angular that's the scope?).</p>
  
  <p>So I tried it with two directives like this:</p>
  
  <p>JavaScript</p>
  
  <pre><code>myApp.directive('activeItem', function() {
      return {
          restrict: 'A',
          templateUrl: 'partials/itemDetails.php'
      };
  });
  
  myApp.directive('activeCompareItem', function() {
      return {
          restrict: 'A',
          templateUrl: 'partials/itemDetails.php'
      };
  });
  </code></pre>
  
  <p>Inside the main View</p>
  
  <pre><code>&lt;div class="product left" active-item&gt;{{item.name}}&lt;/div&gt;
  &lt;div class="product right" active-compare-item&gt;{{item.name}}&lt;/div&gt;
  </code></pre>
  
  <p>This - of course - doesn't work as both products will have the same data from the parent scope.
  So I tried to isolate the scope:</p>
  
  <pre><code>myApp.directive('activeItem', function() {
      return {
          restrict: 'A',
          scope: {
              item: '@itemOne'
          },
          templateUrl: 'partials/itemDetails.php'
      };
  });
  
  myApp.directive('activeCompareItem', function() {
      return {
          restrict: 'A',
          scope: {
              item: '@itemTwo'
          },
          templateUrl: 'partials/itemDetails.php'
      };
  });
  </code></pre>
  
  <p>But that doesn't work either because apparently I can use "item" only as an HTML attribute now, not as an expression <code>{{item.name}}</code>.</p>
  
  <p>Are directives even the right approach to templating? If yes, how can I pass data from the parent scope to a directive, keep them both in sync and update/re-render the directive when the objects get changed?</p>
  
  <p>It seems odd to me that I have to create new directives for each time I want to use the template.</p>