title: How to set ngRepeat element name in transcluded html
body: <p>I'm trying to write a directive to provide table formatting. The idea is that the user passes the directive the list of objects (<code>arr="ctrl.list"</code>) and the name of each object (<code>elem="obj"</code>) and supplies the transcluded format for each table element...</p>
  
  <pre><code>&lt;div ng-controller="Test as ctrl"&gt;
      &lt;test-repeat arr="ctrl.list" elem="obj"&gt;
      the element: {{obj}}
      &lt;/test-repeat&gt;    
  &lt;/div&gt;   
  </code></pre>
  
  <p>This is the directive... </p>
  
  <pre><code>angular
      .module('myApp')
      .directive('testRepeat', function() {
      return {
          template: 
              '&lt;div ng-repeat="elem in arr"&gt;&lt;span ng-transclude&gt;&lt;/span&gt;&lt;/div&gt;',
          transclude: true,
          restrict: 'AE',
          scope: {
              arr: '=',
              elem: '='
          },
          link: function($scope, $elem, $attr) {
          }
      };    
  });
  </code></pre>
  
  <p>And the controller:</p>
  
  <pre><code>angular
      .module('myApp')
      .controller('Test', function() {    
          var self = this;
          self.list = [ {title: 'one'}, {title: 'two'}, {title: 'three'} ];
  });
  </code></pre>
  
  <p>While the array value (<code>arr="ctrl.list"</code>) is properly bound to the directive scope and used by <code>ng-repeat</code> the <code>elem</code> value isn't, likely because these two variables are treated very differently by the <code>ng-repeat</code> directive. </p>
  
  <p>Is it possible to re-write this directive to make the <code>ng-repeat</code> code use the value of <code>elem</code> specified by the user (i.e. <code>obj</code>)? And if I need to write my own version of <code>ng-repeat</code> using the <code>transclude</code> function (passed as a parameter to the <code>link</code> function) how would I watch each element of the array like <code>ng-repeat</code> does?</p>
  
  <p>Here is a <a href="https://jsfiddle.net/kergoog/whvctzvn/31/" rel="nofollow">link</a> to the jsfiddle.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>As requested the desired output would be...</p>
  
  <pre><code>the element: {"title":"one"}
  the element: {"title":"two"}
  the element: {"title":"three"}
  </code></pre>
  
  <p>With the example of the html shown above (i.e. <code>the element: {{obj}}</code>). The broader idea being that the user could customise how they want <code>obj</code> to be displayed though.</p>