Call multiple modules in a single page?


I created module1 and module2 in a single page. module1 is working fine, module2 is not working. Please suggest how to call module1 and module2 correctly in a single page.

<html xmlns="">
    <script src=""></script>
        var mymodule1 = angular.module('module1', []);

        mymodule1.directive('btnDirective', function() {
            return {
                restrict: 'E',
                template: '<table>' +
                    '<tr><td>Enter a value:<input type="text" ng-model="a" /></td></tr>' +
                    '<tr><td>Enter b Value:<input type="text" ng-model="b" /></td></tr>' +
                    '<tr><td><button ng-click="add(a,b)">Add</button></td></tr>' +
                    '<tr><td>Sum of two number {{sum}}</td></tr>' +

                link: function($scope, element, attrs) {

                    $scope.sum = 0;
                    $scope.add = function(a, b) {
                        $scope.sum = parseInt(a) + parseInt(b);
        var mymodule2 = angular.module('module2', []);

        mymodule2.controller('controller2', function($scope) {
            $ = 'Second Module Controller!';

        angular.bootstrap(document.getElementById("app2"), ['module2']);
    <h3>Creating Custom Element Directive</h3>
    <br />
    <div ng-app="module1">
    <h1>my module2</h1>
    <div id="app2" ng-app="module2" ng-controller="controller2">
        Name: {{name}}


You use this:


this involve that your app is module1.
You should create a new module (ex: theapp) that require the two modules.

var app = angular.module('theapp', ['module1', 'module2']);

then replace the ng-app with:


then you can have:

<body ng-app="theapp" ng-controller="controller2">
  <h3>Creating Custom Element Directive</h3><br />
  <h1>my module2</h1>
   Name: {{name}}

Answered By – gianlucatursi

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.