Want to use multiple ng-app within one application

Question

I am working on an application, Where multiple ng-app are defined and used. Initially ng-app on different pages were not conflicting as all the pages were independent but now I have to include a header and header has its own ng-app defined.

I am using two different methods to avoid conflict of header app with other pages app.

First method: Bootstrapping an app manually on each page:

angular.bootstrap($('#mycontact_container'),['contactsApp']);

OR

 angular.element(document).ready(function() {

    angular.bootstrap($('#topNavigation'),['headerApp']);

});

Second method:

angular.module("rootApp", ["headerApp", "contactsApp"]);

Where rootApp is an App defined in body tag that will include entire application within it. headerApp is an app defined on header of each page and contactsApp is app of one custom html page.

First method error:

Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=headerApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0

Error on OR part of First method:

Error: [ng:btstrpd] http://errors.angularjs.org/1.4.8/ng/btstrpd?p0=%26lt%3Bsection%20id%3D%22topNavigation%22%20class%3D%22top-navigation%20ng-scope%22%20ng-app%3D%22headerApp%22%26gt%3B

...f e?JSON.stringify(e):e;d+=c(e)}return Error(d)}}function za(a){if(null==a||Xa(a...

i.e app is already bootstrapped.

Second Method issue: No errors but when I try to use interpolate provide in one of my app which is included in header i.e it will be included throughout application using below code:

headerApp.config(['$interpolateProvider',

    function($interpolateProvider) {
        $interpolateProvider.startSymbol('{$');
        $interpolateProvider.endSymbol('$}');
    }
]);

    app.controller('MainController', ['$scope', '$http',function MainController($scope, $http) {

        $scope.first_name = "abc";
});

I get nothing printed using {$ first_name $} in my view. Ultimately my app is misbehaving. I have posted this issue in different post SO question Can Anyone guide me what exactly I need to follow to correct the behaviour of my application with existing architecture. I guess only angular experts can guide me well here.

Please let me know if more detailing is required.

Update

I was facing following error when I was manually bootstrapping app:

Error: [ng:btstrpd]

because I was using ng-app within html. When manually bootstrapping app then ng-app is not required.