Common controller for Multiple ng-app in AngularJS

Question

I have a common controller that I need access in multiple ng-app scope

Ex:

Controller

function commonCtrl($scope){
    $scope.data = { message: "Hello World" };
}

First ng-app

<div ng-app="firstApp">
    <div ng-controller="commonCtrl">
        <h1>{{data.message}}</h1>
    </div>
</div>

Second ng-app

<div ng-app="secondApp">
    <div ng-controller="commonCtrl">
        <h1>{{data.message}}</h1>
    </div>
</div>

This is not working. I can set scope to one ng-app like

angular.module('firstApp', [])

But How can I make controller as common controller for all ng-app?

Chandermani · Accepted Answer · 2013-07-16 14:37:05Z

7

Create a 3rd module and define the controller in that module. Refer the new module in the two ngApp module you have created. Also the controller has to be defined using the module controller method.

var sharedModule=angular.module('shared',[]);
sharedModule.controller('commonCtrl',['$scope',function($scope) {

}]);

Then use

angular.module('firstApp', ['shared']);
angular.module('secondApp', ['shared']);

answered Jul 16, 2013 at 14:37

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Samyappa Over a year ago

Can you explain simple example please!!

Collectives™ on Stack Overflow

Common controller for Multiple ng-app in AngularJS

Controller

First ng-app

Second ng-app

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Controller

First ng-app

Second ng-app

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related