AngularJS ui-router inserts route in every page

I have two pages

1. http://localhost/page1 which contains ng-app="appOne" in header and ng-app="appTwo" in the body. appTwo uses ui-router to pull forms to enable a multi-step form and displays the content within <div ui-view></div>. So when I go to http://localhost/page1 it redirects to http://localhost/page1/#/form1 and works perfectly fine.

   I've manually bootstrap appTwo in my app.js

   angular.element(document).ready(function() {
        angular.bootstrap(
            document.getElementById('app2_container'),
            ['AppTwo'] //var AppTwo = angular.module('appTwo', ['ui.router']);
        );
   });
   

2.http://localhost/page2 which contains only ng-app="appOne" but when I go to http://localhost/page2 it goes to http://localhost/page2/#/form1

How would I avoid loading the appTwo in page2? I am sure that the ng-app="appTwo" isn't loading in /page2

The urlRouterProvider in appTwo.config is:

$urlRouterProvider.otherwise('/form1');

app.js and angular-ui-router.min.js is in the footer of the page and is loaded in every page

I've tried

angular.element(document).ready(function() {
    if(!document.getElementById('app2_container')) {
         angular.bootstrap(
            document.getElementById('app2_container'),
            ['AppTwo'] //var AppTwo = angular.module('appTwo', ['ui.router']);
         );
    }
});

what am I doing wrong? Thanks in advance!