dynamically Build ng-template using list

Question

I am trying to build ng-template dynamically, In the Data structure, I have a Object that contains list of object of same type or other type of object.

[
                      {
                            type: "device",
                            id: 1,
                            allowedTypes: ["device","action"],
                            max: 5,
                            columns: [

                                {
                                    type: "action",
                                    id: "1"
                                },
                                {
                                      type: "device",
                                      id: 2,
                                      allowedTypes: ["device","action"],
                                      max: 5,
                                      columns: [

                                          {
                                              type: "action",
                                              id: "1"
                                          },
                                          {
                                              type: "action",
                                              id: "2"
                                          }

                                      ]
                                  }

                            ]
                        }
]

My ng-template code:

<script type="text/ng-template" id="and.html">
       <div class="container-element box box-red">
           <h3>And {{item.id}}</h3>

           <ul dnd-list="item.columns"
                 dnd-allowed-types="item.allowedTypes"
                   dnd-disable-if="item.columns.length >= item.max">


               <li ng-repeat="element in item.columns"
                   dnd-draggable="element"
                   dnd-effect-allowed="move"
                   dnd-moved="item.columns.splice($index, 1)"
                   dnd-selected="models.selected = element"
                   ng-class="{selected: models.selected === element}"
                   ng-include="element.type + '.html'" onload="onloadAction()">
               </li>
           </ul>

           <div class="clearfix"></div>
       </div>
   </script>

In the ng-template code the first level or different types of object can easily be added, however same type of object does not work properly when added in the 2nd level, it seems the its going in a recursive loop. This is because the nested ng-template (child) ng-template use of root item.columns from the ng-repeat="element in item.columns".

               <li ng-repeat="element in item.columns"
                   dnd-draggable="element"
                   ng-include="element.type + '.html'">
               </li>

any advise how to resolve this issue.

Answer 1

I have managed to resolve this issue, ng-repeat create a new child scope, however the item from the parent scope is also visible to in the child scope, as this is recursive that mean child template and parent template both have the variable with the same name called item . However the child scope variable item is ignored:

           <li ng-repeat="element in item.columns"
               dnd-draggable="element"
               ng-include="element.type + '.html'">
           </li>

in the above snippet the element also has a variable called item, so in the child scope when we call item.columns the item variable of parent is invoked again, to ensure that the item variable of child is not ignored, we need to use ng-init with ng-include and set the current element as item in the child scope as shown below:

           <li ng-repeat="element in item.columns"
               dnd-draggable="element"
               ng-include="element.type + '.html'" ng-init="item=element">
           </li>

To read more on this please visit http://benfoster.io/blog/angularjs-recursive-templates