Understanding how scope works in angular is super important.

The problem is it can be really hard to understand.

Now that we have some fantastic tools to explore scope interactively,

we'll take a deeper look at what's going on under the hood of Angular.

You're welcome to follow along in work spaces, however my recommendation for

this video is to sit back and relax and try to wrap your mind around the concept.

Whatever you choose, just remember that this is a hard topic and

don't worry about understanding everything completely right out of the gates.

Plus, I've got really good news.

After this video this course gets easier.

There's a light at the end of the tunnel, just keep jogging.

I've added a little bit to our application to aid me in explaining scope.

In the app.js file, I've created a second control called cool controller.

It attaches one function to the scope and that function is called who am I?

Jumping into the index.html file,

I'm invoking the hello console function when the label is clicked.

As well is when the save button is clicked.

This is done through the ng click directive.

The who am I function is invoked, when the edit button is clicked.

Now the big confusing question you may be asking.

Is how can we use the hello consult function from the main controller,

when we're inside the cool controller.

This is cuz of something called prototypical inheritance.

You've probably already heard about prototypes and

prototypical inheritance in other JavaScript courses here on Treehouse.

Let's take a look at how this plays out in Angular.

Using ng-inspector, I see that there are now three scopes.

There's the root scope, the main controller scope, and

the cool controller scope.

Keep in mind, all the scopes phototypically inherit from the root scope

and there's only one root scope in an angular application.

We can see that when we fold the root scope up.

We won't talk too much about the root scope, but just know that is

generally best practice to not use the root scope directly in your application.

The major reason is because any function or

value you create in the root scope is available in every other scope.

Creating functions and

values at the root level, will quickly clutter your application.

Moving down the child scope of the root scope is handled by the main controller.

And we can see that it has one function, the Hello World function.

Here's where things can get confusing.

Because the cool controller is a child of the main controller,

the Hello World function is also available inside its scope.

And I can see that when I click the Save button.

Click Save, open up the console, and

there our hello world function fired, but from inside the cool controller's scope.

And as you might imagine, we have access to the who am I function,

inside of the cool controller.

I see that when I click the edit button.

Now let's really go up the deep end.

I'm going to create a function called hello world but

from inside the cool controller.

As you can see this has exactly the same name as the function

in the main controller.

We'll tell this method to log a string,

This is not the main controller!

Save that.

Refresh the page.

Remember, the hello world method is invoked on the save button when a user

clicks to the ng-click directive.

Click save, I get back the string from the method that

is defined on this hello world method not this hello world method.

Because of prototypical inheritance, the cool controller inherits functions and

values from the main controller.

Only when they don't already exist within the cool controller's scope.

So in this way, inheritance from the parent

only takes place if there's not a value or method of the same name on the child.

The best way to think about prototypical inheritance,

is that it flows only in one direction, from parent to children.

And this as you might expect based on how the concept was named.

One last thing I want to point out, just hopefully a bit more straightforward,

is that sibling controllers will not have access to each other's scopes.

Sibling's scopes are completely isolated.

Let's create one so you can see what I mean.

Okay, new controller called imASibling.

And we'll just attach a static value.

Let's add a new div.

And we'll say that that r controller lives in this div.

We'll even write the value out using an angular expression,

which you'll learn about shortly.

And now, let's take a look at our scopes.

Now the main controller will now have access to values created in the I'm

a sibling controller, and vice versa.

Taking a look at ng Inspector, I can see that the I'm a sibling controller

Is a sibling of the main controller, just as we'd expect.

Both scopes have prototypically inherited, from the root scope, but

neither one shares with each other since they're siblings.

Awesome work, you did it.

Things are about to get easier.

More importantly, you now have a foundation in Angular, and so

we can start building our app.

Next we're gonna use Angular's built in data binding engine

to add data to our to do list app.

Keep up the great work.