I apologise in advance if this question has been asked elsewhere, but I couldn't find it.
I'm using JavaScript to implement a tab-like structure, where the user can open/close these tabs as at will (these are not browser tabs).
Some of these tabs use AngularJS. The main page contains all the imports required.
However, any AngularJS written on the loaded html pages refuses to run, unless run on it's own (so going to the URL directly).
This is the code used to load the html page into the tab
var element = document.createElement("div");
element.id = "tab-content-" + name;
element.style.height = "100%";
element.style.width = "100%";
document.getElementById('tab-content').appendChild(element);
$('#tab-content-' + name).load("./" + name.replace("-", "/") + ".html");
And the page this is loaded to has all the required imports. The issue occurs with both local and external modules, with even the most basic modules/controllers failing.
So, for example if the page "./test.html" is loaded, going directly to test.html will result in the page running correctly, however if the page is opened within this tab-structure the AngularJS modules/controllers on the page will not run correctly.
Anyone know what is causing this? Thanks in advance
