title: how to execute a multiple data-ng-app in sequence in angularjs
body: <p>I have two <code>ng-app</code> in my application <code>app1</code> and <code>app2</code> and two controllers <code>firstcontroller</code> and <code>secondcontroller</code> respectively.</p>
  
  <p>The problem is it first executes 2nd controller then first controller.</p>
  
  <p>But i want to execute in sequence, like 1st controller execution then 2nd controller. </p>
  
  <p>please provide solution for that.<br>
  thanks in advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app1 = angular.module('firstapp', []);
  app1.controller("firstcontroller",function($scope){
      $scope.arr1={name:'arjun'};
      alert($scope.arr1.name);
  }); 
  var app2 = angular.module('secondapp', []);
  app2.controller("secondcontroller",function($scope){
      console.log("come to second app");
      $scope.arr2={title:'kumar'};
      alert($scope.arr2.title);
  });
  angular.bootstrap(document.getElementById("app2"),['secondapp']);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body &gt;
      &lt;div id="app1" data-ng-app="firstapp" data-ng-controller="firstcontroller"&gt;
          &lt;p&gt;{{arr1.name}}&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="app2" data-ng-app="secondapp" data-ng-controller="secondcontroller"&gt;
          &lt;p&gt;{{arr2.title}}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>