I am currently trying to understand some features in AngularJS. I wrote a codePen of my attempt (http://codepen.io/ssj666/pen/XbgKXX).
My code:
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</HEAD>
<BODY>
<div ng-app="test" ng-controller="testCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<div ng-app="t" ng-controller="testCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<div ng-app="t2" ng-controller="tCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('test', []);
app.controller('testCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
<script>
var app = angular.module('t', []);
app.controller('testCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
<script>
var app = angular.module('t2', []);
app.controller('tCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
</BODY>
</HTML>
I hope there isn't a typo crashing everything, but if so I dont see it. Is it possible for a single angularJS controller to control tags with different ng-app-names? Why is it not possible for a second controller to do the same om scope attributes of a different tag (with a different ng-app-name)?
I am currently investigating if my question is a possible duplicate.
