First attempt:
Ok, I examined Angular JS project and the issue occurs because Angular JS keeps global variable and DOM object state between changing views in Single Page Application.
This is not like a regular page change because in that case everything is cleared and FileManager starts fresh in the page.
I could at least fix displaying of second FileManager by adding some cleanup code in Angular’s controllers.js.
However this was not reliable enough, for example in the second FileManager the context menu (right click menu) stops working.
As Angular JS does not clean the leftovers from first FileManager, the second FileManager becomes corrupted.
Angular JS is designed for simple HTML controls, FileManager add lots of information to scope so if the browser does not refresh the page these would cause weird UI problems like this and also memory leaks.

 

Final Solution:
That’s why I implemented the best workaround to use FileManager within AngularJS: using iframe to load a whole MVC view dedicated for FileManager.
This way FileManager is isolated from AngularJS so it’s not corrupted.

 

If you examine About.cshtml and Contact.cshtml, I add the FileManager like this:

 

<iframe width="800"
        height="600"
        style="border: 1px solid #d0d0d0"
        src="@Url.Action("FileManager", new {fileManagerConfigId = 1})" >
</iframe>

These pages will no longer include anything FileManager related other than the above html block so it’s kind of a wrapper for FileManager
As you can see I set iframe’s src property to  FileManager.cshtml which is a dedicated View only for displaying FileManager.
I also pass a parameter to determine which FileManager configuration to display. I used an integer parameter fileManagerConfigId to identify which FileManager I want to show.
For example, you can prefer to use a string parameter to directly specify a root folder location.
This parameter is received in this new action method of MainController.cs:

 

public ActionResult FileManager(int fileManagerConfigId)

I simply use a Switch statement to choose the config id and build a FileManagerRootFolder instance according to my predefined config set 

 

switch (fileManagerConfigId)
{
	case 2:
		rootFolder = new FileManagerRootFolder
		{
			Name = "Root Folder 2",
			Location = "~/App_Data/RootFolder2"
		};
		break;
	default:
		rootFolder = new FileManagerRootFolder
		{
			Name = "Root Folder 1",
			Location = "~/App_Data/RootFolder1"
		};
		break;
}

So if I pass 2 as parameter, I want to show RootFolder2, if I pass 1 or any other as parameter, by default I want to show RootFolder1.
This is just to demonstrate that you can have a dynamic FileManager depending on which page you want to display (e.g. About page versus Contact page)
As we have isolated FileManager to a standalone view we need to pass parameters to it via a route dictionary (which are translated to query string parameters to view URL)