what is the diference between javascript scope and angular js scope

JavaScript

Scope in JavaScript is the variables to which a particular piece of code has access. It includes the variables in the current function, the variables in any containing functions, and all global variables.

For example here is a simple JavaScript that shows some variables that are and are not in scope for a particular piece of code:

<script type="text/javascript">
    var a = 1; // in scope

    function W() {
        var b = 2; // not in scope
    }

    function X() {
        var c = 3; // in scope

        function Y() {
            var d = 4; // not in scope
        }

        function Z() {
            var e = 5; // in scope

            // here is my code
            // it has access to a, c, and e
            a = c + e;
        }

    }
</script>

The code in function Z has access to variables a, c, and e, but not b or d.

AngularJS

AngularJS implements a variation of the MVC Pattern. The $scope variable is the "model" part of the pattern. The properties that you assign to $scope become the variables that are visible to the HTML that uses the scope.

For example, consider this simple example:

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

.

<div ng-controller="MyController">
    <span>{{message}}</span>
</div>

You assign $scope.message in the controller and it is visible as message in the HTML.

Scopes in Angular also behave similar to scopes in JavaScript because they inherit from their parents. In Angular, there is the $rootScope that all $scopes in the application inherit from. Each controller creates a new scope that is a child of the root scope, and child scopes are often created by directives. For example, the ng-if directive creates a child scope.

app.controller('MyController', function ($scope) {
    $scope.message = 'Hello Cleveland!';
    $scope.show = true;
}

.

<div ng-controller="MyController">
    <div ng-if="show">
        <span>{{message}}</span>
    </div>
</div>

In this example, the span is actually in a child scope created by ng-if, but it still has access to the message property because it inherited it from its parent.

Likewise, you can have sibling scopes that don't interact.

For example, say you have two controllers, "Ctrl1" and "Ctrl2":

app.controller('Ctrl1', function ($scope) {
    $scope.message = 'This controller is #1';
}
app.controller('Ctrl2', function ($scope) {
    $scope.message = 'This is the second controller';
}

.

<div ng-controller="Ctrl1">
    <span>{{message}}</span>
</div>
<div ng-controller="Ctrl2">
    <span>{{message}}</span>
</div>

The message variable is distinct in each one because there is no inheritance relationship between the two.

Difference

There is one significant difference between the behavior of scope in JavaScript and in Angular. This behavior is due to the fact that scopes in Angular use prototypical inheritance. There is a lot that has been written about this already, so I won't go into too much detail, but the important thing to remember is this:

Changing a variable in a child scope does not affect the same-named variable in the parent scope.

Each child scope effectively gets its own copy of all of the inherited properties. When the child scope modifies it, it only modifies its copy, not the parent's.

This is not the case in JavaScript. In the first example, the Z function assigns a value to the global a variable. This change will be visible to all of the code. The same would not be true in Angular.