How to use "ng-repeat" within template of a directive in Angular JS?

Question

I'm new to Angular JS and I am trying to create a custom directive that will be used as below:

<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>

Corrps. controller will be:

$scope.cashAccountsColumns = [   {"field": "description", "title": "Description"},   {"field": "owner", "title":"Owner"},   {"field": "currentBalance", "title":"Current Balance" } ]; 

And the directive code is:

return {       restrict : 'EA',       transclude : false,       templateUrl : 'html/linkedlist.html',       scope: {          listcolumns: "@"       },       link : function(scope, element, attrs) {       } } 

template is:

<table class="box-table" width="100%">   <thead>     <tr>       <th scope="col" ng-repeat="column in listcolumns">         {{column.title}}       </th>     </tr>   </thead> </table> 

But this is not working. I'm not getting the value of column.title on screen instead too many rows as below are added to DOM:

<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th> 

Answer 1

Passing an entire object with attribute will not work, you have to use dual way binding. Just change binding from @ to = and modify the HTML below to make it work:

changes to directive code:

// ... scope: {     listcolumns: "=" }, // ... 

changes to template:

  <div linkedlist listcolumns="cashAccountsColumns"></div>