Angular Multiple widgets

HTML

<div id="widget1">
    <div ng-controller="MainController">
    something in here
    </div>
</div>
        
<div id="widget2">
    <div ng-controller="MainController2">
    something else
    </div>
</div>

JavaScript

//widget1.js
var app = app || angular.module('myApp', []);

angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById('widget1'), ['myApp']);
});

app.controller('MainController', function($scope) {
    ...
});
    

//widget2.js
var app = app || angular.module('myApp', []);

angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById('widget2'), ['myApp']);
});

app.controller('MainController2', function($scope) {
    ...
});