AngularJS Scopes ($scope) with Example

Here we will learn scopes ($scope) in angularjs with example, how to define and use scope variables in angularjs with example, how to update scope variable in angularjs and how to use same scope variable in multiple controllers in angularjs with example..

AngularJS Scopes

In angularjs, we have a two main parts one is view (HTML) and another one is controllers. We know that the view represents whatever (data from data model) the data we want to show it on page and controller will hold all the variables and functions which we used to show it on page but how they (view and controller) communicate to each other? Well, here scope came into a picture in angularjs. 

 

Generally, when we create controller in angularjs we will send $scope object as a parameter and set controller properties (variables and functions) in $scope object. In view we can access those $scope properties and show data that values in page.

 

So, scope is an object which holds variables and functions in controller and allow us to access that data between Views and Controller. 

 

In simple words, we can say that scope works as a glue between view (html) and controller and facilitate them to communicate with each other. The scope values will available in both view and controller. 

Syntax of using AngularJS Scope

Following is the syntax of using scope in angularjs applications.

 

<script type="text/javascript">

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

app.controller('angularctrl', function ($scope) {

$scope.fname = "Welcome to";

$scope.lname = "Tutlane";

});

</script>

 

<div ng-app="angularscopeapp" ng-controller="angularctrl">

First Name: {{fname}}<br />

Last Name:  {{lname}}<br />

Full Name: <b>{{fname +" "+ lname}}</b>

</div>

Explanation of AngularJS Scope Syntax

If you observe above syntax while defining controller in angularjs we are sending $scope object as an argument and assigned parameters (fname, lname) to $scope object.

 

Once we add properties to $scope object in controller we will get access to use those properties in view (HTML). 

 

In view we can access those $scope properties by defining like {{fname}} we don’t need to prefix with $scope.

 

We will see how to use $scope in angularjs application with complete example

AngularJS Scopes Example

Following is the example of using scope in angularjs application.

 

Live Preview

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

AngularJs Scope Object Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

app.controller('angularctrl', function ($scope) {

$scope.fname = "Welcome to";

$scope.lname = "Tutlane";

$scope.getname = function () {

return $scope.fname +" "+ $scope.lname;

};

});

</script>

</head>

<body ng-app="angularscopeapp">

<div ng-controller="angularctrl">

First Name: {{fname}}<br />

Last Name:  {{lname}}<br />

Full Name: <b>{{getname()}}</b>

</div>

</body>

</html>

In above example if you observe we defined variables and functions with $scope object and accessing those values in html. Now we will run and see the output of above angularjs application.

Output of AngularJS Scopes Example

Following is the result of using scope in angularjs applications.

 

First Name: Welcome to

 

Last Name: Tutlane

 

Full Name: Welcome to Tutlane

AngularJS Update Scope Variable

In angularjs, when we change scope variable value in view (HTML) automatically it will update in model and controller. We will see how to update scope variables with example.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Scope Object Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

app.controller('angularctrl', function ($scope) {

$scope.txtval="Welcome to Tutlane";

});

</script>

</head>

<body>

<div ng-app="angularscopeapp" ng-controller="angularctrl">

Enter Name : <input type="text" ng-model="txtval" /><br /><br />

Textbox Value: <b>{{txtval}}</b>

</div>

</body>

</html>

In the above example, the controller sets a property txtval to the scope and the same txtval property is associated with in the input with ng-model so when AngularJS processes the ng-model directive in the view, it starts listening for change events on that input element and on the scope's txtval property. 

 

If we change the value of txtval in view automatically it will update in model and controller. Now we will run the application and check the output.

 

Angularjs updating scope variable in model, view and controller example output or result

If you observe output when we are changing text in textbox automatically model and controller scope value updating on change event. 

Is it possible to use same scope variable in multiple controllers?

For this questions answer is YES, we can define same scope variable in multiple controllers. Generally, scope variables are specific to controller so if we define same scope variable name in multiple controllers it will not affect variable in other controller. We will see this with simple example.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs Scope Object Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

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

app.controller('exampleController', function ($scope) {

$scope.textVal = " ";

});

app.controller('helloController', function ($scope) {

$scope.textVal = " ";

});

</script>

</head>

<body ng-app="angularscopeapp">

<div ng-controller="exampleController">

<label>Please enter something to show : </label><input ng-model="textVal">

<span ng-bind="textVal"></span>

</div>

<div ng-controller="helloController">

<label>Please enter something to show : </label><input ng-model="textVal">

<span ng-bind="textVal"></span>

</div>

</body>

</html>

In above angularjs example we have two controllers and the input and span both are using the same attribute textVal but they’re completely independent since they are bound to different controllers scope value.

 

Now if we run above example we will get output like as shown below. If you observe below output when we change textbox values in controller only that respective model and scope values are updating.

 

Angularjs use same scope variable in multiple controllers example