I have two ng-app
in my application app1
and app2
and two controllers firstcontroller
and secondcontroller
respectively.
The problem is it first executes 2nd controller then first controller.
But i want to execute in sequence, like 1st controller execution then 2nd controller.
please provide solution for that.
thanks in advance.
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']);
<body >
<div id="app1" data-ng-app="firstapp" data-ng-controller="firstcontroller">
<p>{{arr1.name}}</p>
</div>
<div id="app2" data-ng-app="secondapp" data-ng-controller="secondcontroller">
<p>{{arr2.title}}</p>
</div>
</body>
Doc said
To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap
While it is possible to have multiple ng-app on the page but only one ng-app directive will be automatically instantiated and initialized by the Angular framework.
Now order can be mantianed by using
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("app2"),['secondapp']);
});
Here is plunker for you Plunker
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With