---
title: "AngularJs Controllers"
description: "Hi everyone in this article I’m explaining about Angularjs Controller"
author: "Anonymous User"
published: 2015-03-21
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/1679/angularjs-controllers
category: "angular js"
tags: ["angularjs controller"]
reading_time: 3 minutes
---
# AngularJs Controllers
Hi everyone in this article I’m explaining about Angularjs Controller\
##### Introduction:
This article explains the Controller in AngularJS. In AngularJS "Controller" has a different meaning, here the [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) [Constructor function](https://www.mindstick.com/forum/160059/how-to-use-the-arrow-function-as-a-constructor-function-in-javascript) is [referred to as](https://answers.mindstick.com/qa/97098/which-layers-are-referred-to-as-network-support-layers) a "Constructor" to augment the Angular Scope.\
The Controller is called in DOM using the ng-controller directive, the Controller defines the initial state of the $scope object.
Now I will show you an example by which it will become easy for you to understand the Controller in AngularJS.
AngularJS application mainly relies on [controllers](https://www.mindstick.com/forum/155773/how-asynchronous-controllers-work-in-asp-dot-net-mvc) to control the flow of data in the application. A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/[properties](https://yourviews.mindstick.com/view/81845/now-it-s-possible-to-predict-properties-of-any-molecule) and functions. Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.
```
...
```
Here we've declared a controller employeeController using ng-controller directive. As a next step we'll define the studentController as follows
```
```
\
1. employeeController defined as a JavaScript object with $scope as argument.
2. $scope refers to application which is to use the employeeController object.
3. $scope.student is property of employeeController object.
4. firstName and lastName are two properties of $scope.student object. We passed the [default values](https://www.mindstick.com/blog/10881/default-values) to them.
5. fullName is the function of $scope.student object whose task is to return the combined name.
6. In fullName function we're getting the student object and then return the combined name.
7. As a note, we can also defined the controller object in seperate JS file and refer that file in the html page.
Now we can use employeeController Employee property using ng-model or using expressions as follows.
```
Enter first name: Enter last name:
You are entering:
{{employee.fullName()}}
```
We've bounded student.firstName and student.lastname to two input boxes.
We've bounded student.fullName() to HTML.
Now whenever you type anything in first name and last name input boxes, you can see the [full name](https://www.mindstick.com/interview/33973/how-to-split-the-full-name-into-firstname-and-lastname-in-sql-server) getting updated automatically.
##### Example:
\
```
Angular JS Controller