Angular JS - Second App and Controller

Question

I am trying to get a second AngularJS App and Controller working but it seems the first one runs but the second never does. It seems to work if I make a single app with 2 controllers. Any insights would be appreciated. Thanks!

JS

var app1 = angular.module("myapp1", []);
app1.controller('Ctrl1', function($scope){
    $scope.variable = "Ctrl1 Working";
});

var app2 = angular.module("myapp2", []);
app2.controller('Ctrl2', function($scope){
    $scope.variable = "Ctrl2 Working";
});

HTML

<div ng-app="myapp1" ng-controller="Ctrl1">
    <p>{{variable}}</p>
</div>

<div ng-app="myapp2" ng-controller="Ctrl2">
    <p>{{variable}}</p>
</div>

JSFiddler: http://jsfiddle.net/paullyvenne/8Ekv5/8/

you need to bootstrap the second one. Angular will stop looking for `ng-app`s after it finds the first one. — TheSharpieOne, Feb 19 '14 at 03:29
this question had been asked / answered. http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page — thescientist, Feb 19 '14 at 03:30

Iran Reyes · Accepted Answer · 2014-02-19T16:12:08.003

The main problem here is that AngularJS can't boostrap several applications in just one HTML file.

Here i let you a link to AngularJS site that explain that.

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

Instead of have several ng-app that mean several AngularJS Application, you can design a structure of multiples modules organized by feature. If you wanna know about it please see the links below:

Coderwall

clintberry.com

Henriquat.re

Angular JS - Second App and Controller

1 Answers1