1👍
✅
According to AngularJS website, Only one AngularJS application can be auto-bootstrapped per HTML document. Ng-app API document.
To fixed your issue, you only allow to have one ng-app for one html document. In this case, either you declare ng-app = "app"
in body
tag or in html
tag. And then assign controller to different div
tag.
HTML
<body ng-app="app">
<div ng-controller="lots">
<h3>Comparatif des lots en volume</h3>
<canvas id="doughnut" class="chart chart-doughnut"
chart-data="data" chart-labels="labels" height="100px"
chart-legend="legend">
</canvas>
</div>
<div ng-controller="repartition">
<h3>Répartition des différents types</h3>
<canvas id="doughnut2" class="chart chart-doughnut"
chart-data="data" chart-labels="labels" height="100px"
chart-legend="legend">
</canvas>
</div>
</body>
JS
angular.module("app", ["chart.js"])
.controller("lots", function ($scope) {
$scope.labels = ["Non lotis", "Lot 1", "Lot 2"];
$scope.data = [90, 5, 5];
})
.controller("repartition", function ($scope) {
$scope.labels = ["JCL", "Appli", "Copy", "Mapset", "PGM"];
$scope.data = [80, 2, 3, 0.5, 10];
});
Source:stackexchange.com