Using Two Controllers in a Single AngularJS App

Question

Full source code can be found http://plnkr.co/edit/rQSg5eMhm9uc9dSWnWEU?p=preview

In the index.html file if I use only one controller at a time it works. That is if I use

<body>
    <div id="inputExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSInputExampleController">
        input example: <input type="text" ng-model="inputValue" /><br/>
        This is the updated value: {{inputValue}}        
    </div>   
</body>

or if I use

<body>
    <div id="scopeExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSScopeExampleController">
        {{understandingScope}}
    </div> 
</body>

It will also work. However if I use both controllers at the same time such as

<body>
    <div id="scopeExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSScopeExampleController">
        {{understandingScope}}
    </div>

    <div id="inputExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSInputExampleController">
        input example: <input type="text" ng-model="inputValue" /><br/>
        This is the updated value: {{inputValue}}        
    </div>   
</body>

The second controller never gets used. {{inputValue}} never gets assigned a default value and also never updates when you type in the text box. It literally just says "{{inputValue}}" the entire time.

I'm sure this is probably something easy but I'm very new to AngularJS. Thanks in advance for any help.

I think you need to declare your ng-app only once for single applciation, so try to move ng-app="AngularJSTestBedWebApp" to <body> or <html> tag. — Rasalom
– Rasalom, Commented Dec 15, 2014 at 15:41

Mark Coleman · Accepted Answer · 2014-12-15 15:41:45Z

5

The ng-app attribute should be placed at the root of the application. In your example that would be <body/> or <html/>

<body ng-app="AngularJSTestBedWebApp">
    <div id="scopeExample"  ng-controller="AngularJSScopeExampleController">
        {{understandingScope}}
    </div>

    <div id="inputExample" ng-controller="AngularJSInputExampleController">
        input example: <input type="text" ng-model="inputValue" /><br/>
        This is the updated value: {{inputValue}}        
    </div>   
</body>

Updated plnkr

answered Dec 15, 2014 at 15:41

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

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

1 Comment

Dan P Over a year ago

Thank you very much. New it was something minor. I can't accept for another 11 mins. But I'll accept as soon as time is up. Thanks for the help!!! 45 mins searching the web and 2 mins on here!

merrais · Accepted Answer · 2016-05-16 09:10:56Z

0

Here a complete example of two applications in one html page and two conrollers in one application :

<div ng-app = "myapp">
  <div  ng-controller = "C1" id="D1">
     <h2>controller 1 in app 1 <span id="titre">{{s1.title}}</span> !</h2>
  </div>

  <div  ng-controller = "C2" id="D2">
     <h2>controller 2 in app 1 <span id="titre">{{s2.valeur}}</span> !</h2>
  </div>
</div>
<script>
    var A1 = angular.module("myapp", [])

    A1.controller("C1", function($scope) {
        $scope.s1 = {};
        $scope.s1.title = "Titre 1";
     });

    A1.controller("C2", function($scope) {
        $scope.s2 = {};
        $scope.s2.valeur = "Valeur 2";
     });
</script>

answered May 16, 2016 at 9:10

merrais

4013 silver badges11 bronze badges

Collectives™ on Stack Overflow

Using Two Controllers in a Single AngularJS App

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related