title: How to use "ng-repeat" within template of a directive in Angular JS?
body: <p>I'm new to Angular JS and I am trying to create a custom directive that will be used as below:</p>
  
  <p><code>&lt;div linkedlist listcolumns="{{cashAccountsColumns}}"&gt;&lt;/div&gt;</code></p>
  
  <p>Corrps. <strong>controller</strong> will be:</p>
  
  <pre><code>$scope.cashAccountsColumns = [
    {"field": "description", "title": "Description"},
    {"field": "owner", "title":"Owner"},
    {"field": "currentBalance", "title":"Current Balance" }
  ];
  </code></pre>
  
  <p>And the <strong>directive code</strong> is:</p>
  
  <pre><code>return {
        restrict : 'EA',
        transclude : false,
        templateUrl : 'html/linkedlist.html',
        scope: {
           listcolumns: "@"
        },
        link : function(scope, element, attrs) {
        }
  }
  </code></pre>
  
  <p><strong>template</strong> is:</p>
  
  <pre><code>&lt;table class="box-table" width="100%"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th scope="col" ng-repeat="column in listcolumns"&gt;
          {{column.title}}
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>But this is not working.</strong> I'm not getting the value of column.title on screen instead too many rows as below are added to DOM:</p>
  
  <pre><code>&lt;th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"&gt;&lt;/th&gt;
  </code></pre>