2

I am buliding an application in angular js.

I have two controllers for two views.

javascript:

var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});
var myApp2 = angular.module('myApp2', []);
myApp2.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});

HTML:

<div ng-app="myApp1">
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

<div ng-app="myApp2">
            <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

only the first controller is getting executed.

Please advice

user67867
  • 421
  • 4
  • 11
  • 24

2 Answers2

4

use like this

var myApp1 = angular.module('myApp1', []);

myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});

myApp1.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});

HTML

<div ng-app="myApp1">
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
 <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>

</div>
Ben
  • 54,723
  • 49
  • 178
  • 224
Ravi
  • 853
  • 8
  • 17
  • Thanks.But I have to display the two apps in different tabs. – user67867 Jan 02 '14 at 07:00
  • 2
    check out this [define multiple angular apps on single page](http://stackoverflow.com/questions/12860595/how-to-define-two-angular-apps-modules-in-one-page) – Ravi Jan 02 '14 at 07:07
  • Any simple example as above?I couldnt understand the complete scope of bootstrap – user67867 Jan 02 '14 at 08:27
  • check out the description [angular.bootstrap](http://docs.angularjs.org/guide/bootstrap) – Ravi Jan 02 '14 at 09:11
4

You need to bootstrap each app as follows:

var myApp1 = angular.module('myApp1', []);
myApp1.controller('myController1', function($scope) {
    alert("check");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp1Div'),['myApp1']);


var myApp2 = angular.module('myApp2', []);
myApp2.controller('myController2', function($scope) {
    alert("check1");
    $scope.x = 'test';
});
  angular.bootstrap(document.getElementById('myApp2Div'),['myApp2']);

And HTML

<div id="myApp1Div" >
            <div ng-controller="myController1">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

<div id="myApp2Div" >
            <div ng-controller="myController2">
                <input type="text" ng-model="x" /> {{x}}
            </div>
</div>

EDIT JSFiddle

Alborz
  • 6,843
  • 3
  • 22
  • 37