How to use multiple Controllers in AngularJS?

Generally, new angular JS developers use only one controller while writing the script.

But if we have to use multiple controllers here is how we can use it:

<!DOCTYPE html>
<script src=""></script>
<body ng-app="myApp">

<div ng-controller="firstController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}}

<div ng-controller="secondController">

First Name: <input type="text" ng-model="fName"><br>
Last Name: <input type="text" ng-model="lName"><br>
Full Name: {{fName + " " + lName}}


var app = angular.module('myApp', []);
app.controller('firstController', function($scope) {
    $scope.firstName = "";
    $scope.lastName = "";

app.controller('secondController', function($scope) {
    $scope.fName = "";
    $scope.lName = "";



Output in browser:

Type your first and last name.


One thought on “How to use multiple Controllers in AngularJS?

  1. You actually make it seem so easy with your presentation but I in finding this topic to be actually something which I think I might never understand. It sort of feels too complex and extremely wide for me. I’m looking forward in your next put up, I will attempt to get the hold of it!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s