Angularjs not binding on second component when there are two same components are on the page

[Rui_J]

Hi,

  I created a very simple component, in side the component, I am using angularjs just to render a simple hello world. This is what I did, I create a component from CRXDE. On the jsp page, this is the code I wrote.

<%@include file="/apps/pwc/global.jsp" %> <% String clientID = currentNode.getIdentifier().replace("/", "_").replace(":",""); %> <div ng-app="myapp_<%=clientID%>"> <div ng-controller="HelloController" > <h2>Hello {{helloTo.title}} !</h2> </div> </div> <script> angular.module("myapp_<%=clientID%>", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "World, AngularJS"; } ); </script>

But Only the first component showing the correct binding (Hello World, AngularJS), and the second component only shows Hello {{helloTo.title}}!

Can someone tell me what did I do wrong?

Thanks!

[awadheshv]

as per my understanding of angular, you cannot have same name for your controller even if they are in different modules. try naming your controller as HelloController_<%=clientID%>

[Runal_Trivedi · Accepted solution]

You cannot have more than one ng-app declaration on the page. Angular will consider only one ng-app and will ignore the other one.

Right way would be to include ng-app may be at body tag level so that there is always one ng-app per page. Under that app you can then include your multiple controllers.

If still you want to go with your current approach of multiple ng-app you will need to bootstrap all ng-app present on the page. Below article will explain how it can be achieved.

http://stackoverflow.com/questions/18571301/angularjs-multiple-ng-app-within-a-page

-- Runal