I'm trying to create two separated Angular application but I wasn't able to do that.
That object of this is creating two different application one for authentication and when success it will call the real app behind.
in this plunker I wasn't able to kill the first app and create a new one when Page-4 is loaded. it seems like I'm trying to inject the new app into the old one whoever I'm trying to kill the old one and create a new app.
I'm sure that the error may be in the use of
This is because you are declaring the new app in the scope of the old one. So this is not possible for a child scope to replace its parent. It is not logical at all.
If you really want to achieve this try to replace the complete page after login using the page address and define your angular application there or you need to use custom ajax call to replace the content on your page. (Which replaces the complete old app HTML)
You can not make a angular app replace itself because it is not in its scope.
You can also define a common parent app for both these app which can replace any one of them at any time.
Check this plunker with a working example.
You need to use routing like this:
And do not treat the new HTML as it is still connected to old one. It is a completely new application on new page.