angular.bootstrap not working

Question

I am trying to use multiple modules within a page in angular

HTML

<!DOCTYPE HTML>
<HTML >
<HEAD>
<TITLE>
ANGULAR
</TITLE>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
</HEAD>
<BODY>
    <script src="js/angular.min.js"></script>
    <script src="js/ngModule.js"></script>
    <script src="js/App.js"></script>
     <div ng-app="AssociateDetails">
            <div ng-controller="AssociateController as associateData">
                    <div ng-repeat="associate in associateData.details">
                         <h1>{{associate.Name}}</h1>
                         <h2>{{associate.Id}}</h2>
                    </div>
           </div>
    </div>
    <div id="SalaryDiv" ng-app="SalaryDetails">
    <div ng-controller="SalaryController as sal">
       <div ng-repeat="salaryDetail in sal.data">
           <p>{{salaryDetail.Name}}</p>
           <p>{{salaryDetail.Salary}}</p>

       </div>

    </div>
    </div>
</BODY>
</HTML>

JS

(function () {
    var app = angular.module("AssociateDetails", []);
    var associatesDetails = [
        { Name: "sdfsd", Id: 123, Alloted: true },
        { Name: "dgfdf", Id: 345, Alloted: true },
        { Name: "sdf", Id: 564, Alloted: true }
    ];
    app.controller("AssociateController", function () {
        this.details = associatesDetails;
    });

    var salary = angular.module("SalaryDetails", []);
    var salaryDetails = [
        { Name: "ssss", Salary: 30000 },
        { Name: "asvs", Salary: 90000 },
        { Name: "sdfd", Salary: 87000 }
    ];
    salary.controller("SalaryController", function () {
        this.data = salaryDetails;
    });
    angular.bootstrap(document.getElementById("SalaryDiv"), ['SalaryController']);
}());

First one is working and data is being displayed but the div with id SalaryDiv is not working

score 0 · Accepted Answer · answered Dec 24 '14 at 08:52

0

You can place only one ng-app per page. If you want multiple ng-app's, you need to bootstrap manually. And you need not write "ng-app" in the html. Simply remove second ng-app in the html and change your bootstrap statement will be like below:

angular.bootstrap(document.getElementById("SalaryDiv"),"SalaryDetails");

Bootstrap 2nd parameter should be moudle name, not a controller.

answered Dec 24 '14 at 08:52

yeswanth

1,543
1
11
19

thanks :) i added it inside angular.element(document).ready(function () { angular.bootstrap(document.getElementById("SalaryDiv"), ['SalaryDetails']); }); – Vignesh Subramanian Dec 24 '14 at 09:40

angular.bootstrap not working

1 Answers1