# Scope ## Lesson Objectives 1. Pass variables from controller to view using $scope 1. Travel around the controller tree using $scope properties ## Pass variables from controller to view using $scope - the glue between controllers and views - an object that gets properties added to it - each property turns into a variable in the view - just like `res.render('view.ejs', {variable1:'foo'})` file: app.js ```javascript const app = angular.module('MyApp', []); app.controller('BaseCtrl', ['$scope', function($scope){ $scope.foo = 'bar'; }]); ``` file:index.html ```html
``` ## Travel around the controller tree using $scope properties You can also access parent, child, and sibling controller properties via $scope's `$parent`, `$$childHead`, `$$childTail`, `$$nextSbling`, `$$prevSibling` properties file: index.html ```html
``` file: app.js ```javascript const app = angular.module('MyApp', []); app.controller('ParentCtrl', ['$scope', function($scope){ this.prop1 = 'foo'; }]); app.controller('ChildController', ['$scope', function($scope){ this.getProps = function(){ console.log($scope.$parent); //get parent scope console.log($scope.$parent.parent.prop1); //get prop1 on controller instance console.log($scope.$parent.$$childHead); //get first child of parent console.log($scope.$parent.$$childHead.$$nextSibling); //get first sibling of first child of parent } }]); ```