Pass parameters to Angular's ng-include

Question

I need two tables on my page and a lot of elements inside tables.

I created file AccountItem.html:

<div data-as-sortable-item-handle>
<table>
    <tr>
        <td class="draggable-index-field">
            {{$index + 1}}
        </td>
        <td class="draggable-name-field">
            {{item.accountName}}
        </td>
        <td class="draggable-enabled-field">
            <input id="enabled-{{$index}}" type="checkbox" name="accounts[]" ng-checked="item.enabled" disabled/>
        </td>
    </tr>
</table>

This file is related to each row in table.

Also I created file for table SortAccountList.html:

<div class="panel panel-info">
<div class="panel-heading">
    <h3 class="panel-title ng-binding">{{title}}</h3>
</div>
<div class="panel-body">
    <table>
        <td class="draggable-index-field">
            #
        </td>
        <td class="draggable-name-field">
            Account Name
        </td>
        <td class="draggable-enabled-field">
            Enabled
        </td>
    </table>
    <ul data-as-sortable = "sortableOptions" data-ng-model="accountList" class="draggable-area">
        <li ng-repeat="item in accountList" data-as-sortable-item ng-include="'AccountItem.html'"></li>
    </ul>
</div>

I include this file with directive in my main file:

<div ng-include="'SortAccountList.html'" onload="title = 'Sorted Account List'; accountList = sortedAccounts"></div>

When I load this page in browser it shows me table, title on it which I pass with "title" parameter. But it does not want to show rows in the table. However, if I change accountList to sortedAccounts which is a List in my controller it shows all rows. I can not use sortedAccounts because I have second table where I want to pass different accounts from my controller.

So, my question, how to pass properly this parameter? Thank you!

Answer 1

The ng-init="" attribute on the include tag should do what you need.

<div ng-include="'SortAccountList.html'" 
ng-init="title = 'SortedAccount List'; accountList = sortedAccounts"></div>`

Answer 2

Do not use ngInclude. Use a directive and pass data using directive's scope.

directive('sortAccountList', function() {
  return {
    restrict: 'E',
    scope: {
      title: '=',
      accountList: '='
    },
    templateUrl: 'SortAccountList.html'
  };
});