AngularJS Tutorial

Define AngularJS

Download AngularJS

AngularJS Expression

AngularJS vs Javascript

AngularJS Directives

AngularJS Module

AngularJS Controller

Custom Directive

AngularJS Scope

AngularJS Validation

AngularJS Filter

AngularJS SelectBox

AngularJS Directive

AngularJS Services

AngularJS Directives

AngularJS Routing

Interview Questions

AngularJS Scope

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 }}

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.firstName = "Mark";
    $scope.lastName = "Zuckerberg";

In the Above example, there is only one scope which is available for entire div.

Root Scope

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:

<p>Value of color in rootscope is: <span>{{color}}</span></p>

var app = angular.module('myApp', []);$rootScope) {
    $rootScope.color = 'green';
app.controller('myCtrl', function($scope) {
    $scope.color = "red";