AngularJS 1.4.x

<!DOCTYPE html>
<html ng-app="appMain">
<body>

<div ng-controller="ControllerNumber1 as cn1">
    <h1>[{{cn1.messageText}}]</h1>
    <button ng-click="cn1.okClick()">OK</button>
</div>

    <div ng-controller="ControllerNumber2 as cn2"
         id="subAppDiv">
        <h2>
            [[{{messageText}}]]
        </h2>
        <button ng-click="nextClick()">NEXT</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
    <script type="text/javascript">
        var appMainModule = angular.module('appMain', []);

        appMainModule.controller('ControllerNumber1', function () {

            var thisApp = this;

            thisApp.messageText = 'this is a message';

            thisApp.okClick = function () {
                alert('you did it. you clicked a button. woot!');
            }
        });

        var subModule = angular.module('subApplication', []);

        subModule.controller("ControllerNumber2", function ($scope) {

            alert('Controller#2 Loading..')
            $scope.messageText = "My Message";

            $scope.nextClick = function () {
                alert('next button was clicked..');
            };
        });

        angular.bootstrap(document.getElementById("subAppDiv"), ['subApplication']);

    </script>

</body>
</html>