how to execute a multiple data-ng-app in sequence in angularjs?

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <script>
    var app1 = angular.module('myApp1', []);
    app1.controller("app1Controller", function($scope) {
      $scope.empApp1 = {
        empName: 'Anil Singh'
      };
    });

    var app2 = angular.module('myApp2', []);
    app2.controller("app2Controller", function($scope) {
      $scope.empApp2 = {
        empDept: 'IT'
      };
    });

    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById("idsapp2"), ['myApp2']);
    });
  </script>
</head>

<body>
  <div data-ng-app="myApp1" data-ng-controller="app1Controller">
    <p>{{empApp1.empName}}</p>
  </div>
  <div id="idsapp2" data-ng-controller="app2Controller">
    <p>{{empApp2.empDept}}</p>
  </div>
</body>

</html>

// Code goes here

/* Styles go here */