I'm facing an issue with nesting two scripts in my code. When I try to open and close the second script, it ends up closing the first one instead of the intended second one.
The technology I am using for the front-end is AngularJS.
The structure of my code is as shown below:
<list-form acordeon="true" label="admin.libro.form.libroEdiciones" list="ctrl.item.ediciones"
resolve="{openPaisModal: ctrl.openPaisModal,
openCiudadModal: ctrl.openCiudadModal, ciudadService: ctrl.ciudadService,
paisService: ctrl.paisService}"
required="true"
template-url="libro.edicion.html">
</list-form>
<script type="text/ng-template" id="edicion.agente.html">
<uib-accordion close-others="oneAtATime" class="col-sm-12">
<div uib-accordion-group class="panel-default" is-open="element.desplegado"
heading="{{element.id ? element.nombre : 'admin.traduccion.form.nuevoAgente' | translate}}">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="form-group">
<label-form key="admin.libro.form.nombre" for="nombre" required="true"></label-form>
<input class="form-control" id="nombre" ng-model="ctrl.item.nombre" required>
</div>
</div>
</div>
<div class="row">
<!-- Inside this row I'm trying to create another list-form and its script -->*
</div>
</div>
</uib-accordion>
</script>
Is there a way to solve this issue?
EDIT 1
I want to clarify that I am not attempting to load scripts asynchronously. Below you can find the solution I came up with along with the corresponding code snippet.