The $scope object in controllers

The $scope object in AngularJS is a special JavaScript object that binds data between the controller and the view (HTML template). It serves as the model in the MVC (Model-View-Controller) architecture of AngularJS.

---

1. What is $scope?

✔ $scope acts as a bridge between the controller and the view.
✔ It stores variables, functions, and data that can be used in the HTML template.
✔ $scope is automatically injected into AngularJS controllers.
✔ It allows two-way data binding between the model and the view.

Basic Example

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

app.controller('MyController', function($scope) {
    $scope.message = "Hello, AngularJS!";
});

<div ng-app="myApp" ng-controller="MyController">
    <p>{{ message }}</p> <!-- Binds to $scope.message -->
</div>

Here, $scope.message holds the text, which is displayed inside <p> using AngularJS interpolation ({{}}).

---

2. Defining Variables and Functions in $scope

You can define both variables and functions inside $scope.

Example: Adding a Function to $scope

app.controller('MathController', function($scope) {
    $scope.number = 10;
    $scope.double = function() {
        return $scope.number * 2;
    };
});

<div ng-controller="MathController">
    <p>Number: {{ number }}</p>
    <p>Double: {{ double() }}</p>
</div>

Explanation:

• $scope.number stores the number 10.
• $scope.double() is a function that returns twice the number.

---

3. Two-Way Data Binding with $scope

✔ Two-way data binding means that changes in the model update the view, and changes in the view update the model.

Example: Using ng-model for Two-Way Binding

app.controller('UserController', function($scope) {
    $scope.username = "John Doe";
});

<div ng-controller="UserController">
    <input type="text" ng-model="username">
    <p>Hello, {{ username }}!</p>
</div>

Explanation:

• Changing the input field updates $scope.username, which updates the paragraph (<p>) dynamically.

---

4. Nested $scope and Inheritance

✔ $scope objects are hierarchical and inherit from parent controllers.

Example: Parent and Child Controllers

app.controller('ParentController', function($scope) {
    $scope.parentMessage = "Message from Parent!";
});

app.controller('ChildController', function($scope) {
    $scope.childMessage = "Message from Child!";
});

<div ng-controller="ParentController">
    <p>{{ parentMessage }}</p>
    
    <div ng-controller="ChildController">
        <p>{{ parentMessage }}</p> <!-- Inherited from Parent -->
        <p>{{ childMessage }}</p>
    </div>
</div>

Explanation:

• ChildController inherits $scope.parentMessage from ParentController.

---

5. Watching for Changes with $watch()

✔ The $watch() function monitors changes to a $scope variable.

Example: Watching a Variable

app.controller('WatchController', function($scope) {
    $scope.counter = 0;

    $scope.$watch('counter', function(newVal, oldVal) {
        console.log('Counter changed from ' + oldVal + ' to ' + newVal);
    });

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

<div ng-controller="WatchController">
    <p>Counter: {{ counter }}</p>
    <button ng-click="increment()">Increment</button>
</div>

Explanation:

• $watch('counter', function(newVal, oldVal) { ... }) runs whenever $scope.counter changes.

---

6. Using $scope.$apply() for Manual Updates

✔ Normally, AngularJS automatically detects changes.
✔ In some cases (e.g., inside setTimeout()), you need to manually update $scope using $apply().

Example: Using $apply()

app.controller('ApplyController', function($scope) {
    $scope.message = "Waiting...";

    setTimeout(function() {
        $scope.$apply(function() {
            $scope.message = "Updated!";
        });
    }, 2000);
});

<div ng-controller="ApplyController">
    <p>{{ message }}</p>
</div>

Explanation:

• $apply() tells AngularJS to update the UI manually after the timeout.

---

7. Destroying $scope with $destroy()

✔ Use $scope.$destroy() to clean up resources when a controller is no longer needed.

Example: Destroying $scope

app.controller('DestroyController', function($scope) {
    $scope.message = "Active";

    $scope.destroyScope = function() {
        $scope.$destroy();
    };
});

<div ng-controller="DestroyController">
    <p>{{ message }}</p>
    <button ng-click="destroyScope()">Destroy</button>
</div>

Explanation:

• Clicking the Destroy button removes the $scope object, stopping further updates.