Why second Module is not working in angularjs?

Question

I am using two module in one page and second module is not working. If i removed first module then second one is working fine. I dont know why is this happening , because we can use the two or many module in one page.

<html>
<head>
   <title>Angular JS</title>

<script src="angular.min.js"></script>
</head>
<body>


<p>------------ New Controller ------------</p>

<div ng-app="newApp" ng-controller="validateform" >
{{name}}
    <form name="newForm">
        Enter Name: <input type="text" id="firstName" name="firstName"
        ng-model="firstName" ng-maxlength="20"> </br>
        <button ng-click="show()" >Submit</button>
    </form>
</div>
<script>
//Creating AngularJS controller here
var newApp = angular.module('newApp',[]);
newApp.controller('validateform',function($scope){
   $scope.name="newApp";
   $scope.show = function() {
    if($scope.firstName == undefined || $scope.firstName == '')
        alert('Name is Required');
    else
        alert('Hi - ' + $scope.firstName);
    };
   }
);
</script>

   <h2>AngularJS Sample Application</h2>
   <div ng-app="mainApp" ng-controller="myController">
   {{name}}
   </div>
<script>
   var mainApp = angular.module("mainApp", []);
   mainApp.controller('myController',function($scope){
      $scope.name="rishi";
   });
</script>
</body>
</html>

You should have only one module acting as an app per page. The other modules should be dependencies. — MikeSW, Jul 03 '15 at 14:27
possible duplicate of [How to define two angular apps / modules in one page?](http://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page) — MikeSW, Jul 03 '15 at 14:28

score 0 · Answer 1 · answered Jul 03 '15 at 14:43

You can only have one ng-app per page. If you want another module, then you can inject it into the first module:

var newApp = angular.module('newApp',['mainApp']);

This will give you access to that module's controllers etc...

And on the page, you could define that controller as the controller for a specific

<div ng-controller="myController">
...
</div>

The question is, why not just include the controller from the second module in the first module and have them all together?

Why second Module is not working in angularjs?

1 Answers1