Tutorials     About     RSS
Tech and Media Labs

AngularJS $scope Hierarchy

Jakob Jenkov
Last update: 2014-08-26

The $scope object used by views in AngularJS are organized into a hierarchy. There is a root scope, and the root scope has one or more child scopes. Each view has its own $scope (which is a child of the root scope), so whatever variables one view controller sets on its $scope variable, those variables are invisible to other controllers.

Look at this AngularJS code example:

<!DOCTYPE html>
<html lang="en">

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

<body ng-app="myapp">

    <div ng-controller="myController1">



    <div ng-controller="myController2">



        var module       = angular.module("myapp", []);
        var myController1 = module.controller("myController1", function($scope) {
            $scope.data = { theVar : "Value One"};
        var myController2 = module.controller("myController2", function($scope) {
            $scope.data = { theVar : "Value Two"};


This example contains two views, each with their own controller function. Each controller sets the variable data.theVar to different values.

When this example is executed, the $scope hierarchy will look like this:

  • Root $scope
    • $scope for myController 1
    • $scope for myController 2

As you can see, the $scope object used by the two controllers are not the same $scope object. That is also why the example above would write out two different values for the data bindings {{data.theVar}} inside the two views. The two controller functions for the views set different values for the data.theVar variable in each their own $scope object.

Jakob Jenkov

Featured Videos

Thread Congestion in Java - Video Tutorial

Sponsored Ads

Maildroppa - Smart Email Marketing Solution
Close TOC

All Trails

Trail TOC

Page TOC