---
title: "AngularJS Controllers and Scope"  
description: "AngularJS controllers and scopes are essential for organizing application logic and managing data binding between controllers and views."  
author: "Ashutosh Patel"  
published: 2024-06-20  
updated: 2024-06-20  
canonical: https://www.mindstick.com/blog/304403/angularjs-controllers-and-scope  
category: "angular js"  
tags: ["javascript", "angular js", "angularjs scope", "angularjs controller"]  
reading_time: 3 minutes  

---

# AngularJS Controllers and Scope

In AngularJS, controllers and [scopes](https://www.mindstick.com/forum/160746/explain-the-concept-of-scope-in-angularjs) are basic concepts that work together to [manage application](https://www.mindstick.com/forum/160039/what-is-redux-and-how-does-it-help-manage-application-state-in-react) data and behavior in a view. Here is an overview of both proposals.

#### Controllers

Controllers are JavaScript functions that control application data and behavior. It is defined by the controller functionality provided by the AngularJS **module**.\
**[Responsibilities](https://yourviews.mindstick.com/view/82654/a-basket-full-of-responsibilities)**

**[Business logic](https://answers.mindstick.com/qa/30543/what-is-business-logic)-** Controllers contain business logic, which controls user interaction and data consumption.\
**Scope Interaction-** The scope is interacted with and data and methods are displayed in the view.

## Example

```javascript
angular.module('myApp', [])
  .controller('MyController', function($scope) {
    $scope.message = 'Hello, AngularJS!';
    $scope.counter = 0;

    $scope.incrementCounter = function() {
      $scope.counter++;
    };
  });
```

**In the example above**\
`MyController` is a controller that defines `$scope.message` and `$scope.counter`. It also provides an `incrementCounter` function that modifies the `$scope.counter`.

#### \
scope

Scopes are objects that define an application model. They act as the glue between **controllers** and **views**.\
Every AngularJS application has a root scope, and every controller has its own scope, which inherits from the root scope.\
**Responsibilities**

**[Data Binding](https://www.mindstick.com/articles/337466/exploring-data-binding-in-mvc-how-it-connects-model-and-view)-** Scopes provide data binding between controllers and views, ensuring that changes to one are reflected in the other.\
**[Event Handling](https://www.mindstick.com/articles/12724/event-handling-in-android)-** Event handling using `$emit`, `$broadcast`, and `$on` is facilitated

## Example

```html
<div ng-controller="MyController">
  <p>{{ message }}</p>
  <button ng-click="incrementCounter()">Increment Counter</button>
  <p>Counter: {{ counter }}</p>
</div>
```

## In the example above

`ng-controller="MyController"` associates the controller with the view, and provides access to the scope properties of `MyController` (`message`, `counter`, `incrementCounter`) using double curly braces (`{{ ... }}`). for data binding and `ng-click` to [handle events](https://www.mindstick.com/forum/157865/how-does-knockoutjs-handle-events-and-event-binding) Let's do it.

**Also, Read:** [Custom Filters in AngularJS](https://www.mindstick.com/blog/304399/custom-filters-in-angularjs)

#### Interaction Between Controller and Scope

## Binding

- The data defined in scope (`$scope.message`, `$scope.counter`) is automatically accessed in the associated view.
- Changes made to the scope properties of the controller are reflected in the view and vice versa due to AngularJS’s two-way data binding.

## Method

- Functions defined in scope (`$scope.incrementCounter`) can be called directly from the view using AngularJS directives such as `ng-click`.

## Life Cycle

- Controllers and their associated scopes are created and destroyed based on the AngularJS application lifecycle, ensuring proper [initialization](https://www.mindstick.com/interview/160/what-is-the-difference-between-assignment-and-initialization) and repair of objects

## Example-

Here is a simple example that demonstrates the use of controller and scope in angular js,

```html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Controller and Scope Example</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- defines the angular controller -->
<div ng-controller="myController">
    <div class="container my-4">
        <!-- bind the controller data into view -->
        <h3>{{ message }}</h3>
        <button ng-click="incrementCounter()">Increment Counter</button>
        <p>Counter: {{ counter }}</p>
    </div>
</div>

<script>
angular.module('myApp', [])
.controller('myController', function($scope, $timeout) {

    $scope.message = 'Angular js Controller and Scope example';
    $scope.counter = 0;
    // function that call on button click
    $scope.incrementCounter = function() {
      $scope.counter++;
    }
});

</script>
</body>
</html>
```

## Output-

![AngularJS Controllers and Scope](https://www.mindstick.com/blogs/a1623a9f-ebff-4fe9-b6a4-da934bf71208/images/d08999b3-6880-4043-97ba-a75686d3ac46.png)

AngularJS controllers and scopes are important for organizing application logic and maintaining data bindings between controllers and views. Controllers define data and methods in scopes, which are then accessible and editable in HTML templates using AngularJS directives and data binding syntax. Understanding these concepts is critical to building robust, maintainable AngularJS applications.

**Also, Read:** [Create Custom Services in AngularJS](https://www.mindstick.com/blog/304402/create-custom-services-in-angularjs)

---

Original Source: https://www.mindstick.com/blog/304403/angularjs-controllers-and-scope

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.