AngularJS Scope
The scope is the binding part between the HTML (view) and the JavaScript (controller).
A scope is an object with available properties and methods.
The scope is available for both View and Controller.
When you create a controller in AngularJS, you pass the $scope object as an argument:
Example
Properties made in the controller can be referenced in the view:
When adding properties to the $scope object in the controller, the view (HTML) gets access to these properties.
In the view, you do not use the prefix $scope, and you refer to a property name, like {{carname}}.
Understanding the Scope
If we consider including an AngularJS application:
Controller, which is a JavaScript function that creates/changes/deletes/controls data.
Then there is the scope model.
A scope is a JavaScript object with properties and methods available to both the view and the controller.
Example
If you make changes in the view, the model and the controller will be updated:
The two examples above only have one scope, so knowing your scope isn’t a problem, but the HTML DOM may contain sections that only have access to certain scopes for larger applications.
Example
When working with the ng-repeat directive, each iteration has access to the current iteration object:
Each <li> element has access to the current iteration object, in this case, a string, which is referenced using x.
root scope
Each <li> element has access to the current iteration object, in this case, a string, which is referenced using x.
Root scope
All applications have a $rootScope, the scope created on the HTML element containing the ng-app directive.
RootScope is available throughout the application.
If a variable has the same name in both the current scope and the rootScope, the application uses the one in the current scope.
Example
A variable named “color” exists in both the controller’s scope and the rootScope: