How to have more than one controllers in AngularJS correctly?

Question

I am getting started with AngularJS, and as I understand, I can have different controllers for different sections of my web page. I am having the problem getting it work. I have two sections of my page and corresponding to each one ng-controller - JSFiddle. Only the section that come first works. For example currently, app1 works fine, but when I move it below app2, only app2 works fine. What could be wrong? Much appreciate any explanation regarding why this behavior and any links.

Answer 1

You can have multiple controllers, but you cannot have multiple ng-app directives on the same page. This means you should only have a single ng-app directive in your html that points to a single module that will be used in your application.

You then define this module and define all your controllers in this module:

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

app.controller('TextController', function ($scope) {
    //Controller Code Here    
});

app.controller('ItemController', function ($scope) {
    //Controller Code Here
});

If for some reason you want to have controllers in separate modules, you can still do that, and include those modules as dependencies of your main module:

var items = angular.module('items', []);
var text = angular.module('text', []);
var app = angular.module('app', ['items', 'text']);


text.controller('TextController', function ($scope) {
    //Controller Code Here
});

items.controller('ItemController', function ($scope) {
    //Controller Code Here
});

Generally you don't need to have a module for each controller. Modules are used to group related pieces of functionality together to make it easy to take that and re-use it in another application.

Here are links to some examples:

Single Module : http://jsfiddle.net/36s7q/4/

Multiple Modules: http://jsfiddle.net/36s7q/5/

Notice how in both example there is only a single ng-app on the page.

Answer 2

Take a look at this, I changed a lot around. http://jsfiddle.net/36s7q/6/

No need for two app modules on the page to achieve two controllers, you can have multiple controllers within the same module. I also simplified the syntax. Take a look.

var items = angular
.module('app1', [])
.controller('ItemController', function($scope) {
$scope.items = [ {
    title : 'Pencil',
    quantity : 8,
    price : 4.2
}, {
    title : 'Pen',
    quantity : 2,
    price : 5.2
}, {
    title : 'Watch',
    quantity : 3,
    price : 10.2
} ];
})
.controller('TextController', function($scope) {
$scope.text = {
    message : 'Welcome!!'
};
});

Answer 3

Here is how you have multiple controllers:

       var app = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

 app.controller('DemoCtrla', DemoCa)
    .controller('DemoCtrlb', DemoCb)
    .controller('DemoCtrlc', DemoCc);


        function DemoCa($mdConstant) {
                        // function here
                    }

        function DemoCb($mdConstant) {
                        // function here
                    }

        function DemoCc($mdConstant) {
                        // function here
                    }

I hope it helps ;)

Answer 4

Instead of answering your actual question, i suggest usage of routing.

Be aware: This technique is not needed to solve your issues. However, you may want to know about it for future projects.

If i got you right, all you want to do is using a different controller / view for a specific section of your page.

To achieve this, create a single application module (remember, Angular applications are SPA's). Then, you could define some routes and tell Angular what to use when one of them is demanded:

var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {templateUrl: './partials/views/root.html',   controller: 'rootCtrl'}}).

        when('/section', {templateUrl: './partials/views/section.html',   controller: 'sectionCtrl'}}).

        otherwise({redirectTo: '/'});
}]);

Further reading: http://docs.angularjs.org/api/ngRoute

Be aware that the latest stable version of Angular requires the ngRoute module in order to use the routeProvider.