Multiple versions of AngularJS in one page

Question

What issues might I experience in having two different versions of AngularJS loaded into one page?

Obviously this seems like a stupid thing to do, b

Answer 1

Angular is really not prepared to co-exist with other version. But it's feasible.

First of all load angular library and make sure that before loading window.angular is empty:

Note that each application (app1.js, app2.js) for each version of angular should be loaded immediately after loading angular library.

Each JavaScript file of the application shoud be wrapped in self executing function (function(angular) { ... })(angular). Look at the example of app2.js:

(function(angular) {

angular.module('myApp2', []).

controller('App2Ctrl', function($scope) {
    $scope.$watchCollection('[a, b, c]', function() {
        console.log(angular.version.full);
    });
});

})(angular);

Note that here I'm using $watchCollection which is only available for angular 1.2.x. By providing scope of anonymous function for each file you are forcing application to reach angular property instead of window.angular property.

Finally you have to bootstrap the application using manuall method:

Working plunker here. After running please check console window to see logged versions of angular used.