The scope is the binding part between the view(HTML) and the controller(javascript function) that makes/changes/removes/controls the data. The scope is available for both the view and the controller.
In AngularJS, when you make a controller, you pass the $scope object as an argument. When adding properties to the $scope object in the controller, the view (HTML) gets access to these properties. In the view, you do not need to prefix $scope, you just refer to a propertyname, like {{firstName}}.
Example: Shows the working of $scope object. The same example as we have created in AngularJS Controller.
<div ng-app="myApp" ng-controller="myCtrl">
Your Name is: {{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Mark";
$scope.lastName = "Zuckerberg";
});
</script>
In the Above example, there is only one scope which is available for entire div.
All applications have a $rootScope which is available in the entire application.
<body ng-app="myApp">
<p>Value of color in rootscope is: <span>{{color}}</span></p>
<div ng-controller="myCtrl">
<p>Value of color in scope under ng-controller is:
<span>{{color}}</span></p>
</div>
<p>Value of color in rootscope is: <span>{{color}}</span></p>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'green';
});
app.controller('myCtrl', function($scope) {
$scope.color = "red";
});
</script>
</body>