I have two ng-app but it's not working simultaneously. If I'd comment-out, then the other section is working and vice versa.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Angular</title>
</head>
<body>
//first section
<div id = "section1" ng-app="myapp" ng-controller="myctrl" ng-init="company='Example'; location = 'Earth'">
<input ng-model="name">
<h1 ng-bind="name"></h1>
<h1>Welcome {{name}} to {{company}} at {{location}}</h1>
<p>{{site}} {{setting}}</p> //running from controller myapp
</div>
//second section
<div id = "section2" ng-app="myapp2" ng-controller="myctrl2"> {{x}} {{y}} </div>
<script>
var app = angular.module("myapp",[]);
app.controller("myctrl", function($scope){
$scope.site = "www.example.com";
$scope.setting = "Bliktzgreig";
});
var app2 = angular.module("myapp2",[]);
app2.controller("myctrl2", function($scope){
$scope.x = "Afforestation";
$scope.y = "Deforestation";
});
</script>
</body>
</html>
Nature
Welcome Nature to Example at Earth
www.example.com Bliktzgreig
Afforestation Deforestation
