Understanding Isolate Scope

AngularJS Video Tutorial by

Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 303 of the free egghead.io lessons, plus get AngularJS content delivered directly to your inbox!

Existing egghead subscribers will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.

    Isolate Scope Review P
    AngularJS John Lindquist 3:30
    Isolate Scope "&"
    AngularJS John Lindquist 6:03
    Isolate Scope "="
    AngularJS John Lindquist 2:51
    Isolate Scope "@"
    AngularJS John Lindquist 4:51
    $scope vs. scope
    AngularJS John Lindquist 9:14
    Basic Behaviors
    AngularJS John Lindquist 3:29
    Isolate Scope "@"
    AngularJS John Lindquist 4:51
    Isolate Scope "&"
    AngularJS John Lindquist 6:03
    Isolate Scope "="
    AngularJS John Lindquist 2:51
    Write Your First Directive
    AngularJS John Lindquist 2:46
    First Directive
    AngularJS John Lindquist 2:08

Understanding Isolate Scope

6:38 AngularJS lesson by

By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive.

Access Lesson Code!
Subscribe today.

egghead.io comment guidelines


By adding an isolated scope object to your AngularJS directive you can insure that each element using that directive has its own scope. This prevents it from affecting sibling directives and encapsulates the directive.

Roman Ganchenko

What is the shortcut in WebStorm to "Inspect Language"?
Answer: hit alt+enter and you will see it.
Great feature!


Its option + enter on a mac. :)


The proliferation of the chore variable made this video a little bit confusing for me. The parameter name in the ChoreCtrl#logChore function, the name of the first parameter of the function in the done attribute, and the name of the model in the directive could all have been called something different.

I made a fiddle to play with the & binding. It might be helpful for anyone else that is still confused about why the directive template needed {chore: chore} http://jsfiddle.net/cL4guvxf/

Chris Gat

I was confused in exactly the same way Ben. Thanks for the fiddle. Cleared things up


What's a common application use-case for this sort of pattern? I like that the videos are concise, but I don't want to forget about applying individual features to large scale application architecture. Just some food for thought.


Example that lead you with no doubt, based on teachers video example - https://jsbin.com/digiru/7/edit?html,js,output

John Lindquist: Isolate scope is one of those things where you can read the docs for days and have no clue what they're talking about. Then, someone shows it to you and you're like, "Oh, that was really easy."

We're going to walk through isolate scope and why you would use it. With this kid directive, these kids are going to do chores. This kid is going to be an element, so we'll script "E" for element.

Then, we'll have a template which will look something like this. If we input a type of text, so you can tell which chore to do. Your model of "chore" and then just show the chore after, I guess.

So if we add a kid here, and we show what's going on, we'll say, "Clean your room." That's pretty simple, it's just that once we start having multiple kids, you start running into a lot of issues.

We tell one kid to clean his room and the rest of them receive that same message to clean their rooms, because they're all sharing this same scope at this point. They're not isolated from each other and how the bindings and everything update.

What you need to do is pass in an object to the scope property there. This will limit the scope to being just one per kid, basically. If we tell him to, "Clean you room," and the next kid, "Wash the dishes and take out the garbage," you can see that the binding still works.

But it's limited to the individual directive that we created. It's pretty obvious here why that's necessary.

Now where this could create some conflict is that this breaks the interaction with the controllers that wrap around it and invoking or binding to anything that's on the scope of that controller. What that turns into is playing with some of these properties in the scope object.

Let's create a chore controller and set up some things we'll want to interact with. We'll say "chore controller."

We can "log chore" and then "pass on chore" and alert can say, "Chore is done." All right, so from here, we'll just get rid of the other kids.

We only need one kid to do chores. You understand why it needs to have isolate scope, don't you? We can say when this kid is done, "log chore."

We're going to set this up "done" to basically map to the log chore in the controller. Actually, let's make sure we set up the controller before I forget.

Your controller, "chore" controller, and format this a little bit. The kid "done" is going to map to this expression here, and how we're going to do this is by using this "done" is the "&" sign for expression.

I'll go into more detail on the different expression value binding and what can go here. Basically, what we can do now is create a div with a class of button and then ng-click is going to invoke "done."

Remember, this "done" is really mapped to whatever you passed into this "done" attribute. Right now it's "log shore" and "log chore" is defined as the scope of the controller.

If you click on "done" it's going to say "undefined as done", that's because we haven't passed anything into "done." This does require a bit of special syntax because of the nature of the beast here.

You're going to pass an object with the name parameter of "chore" and map that to "chore." The property of chore's value, we already set up. In our index, we have to make sure we have the parameter of "chore" there.

Once we have this, you can say, "Clean your room," and then click on "I'm done," and say, "Clean your room is done."

So basically, if you see how this all kind of wires up, because we said this is an expression, that means that this here will map to this, and from there on out, anytime we invoke "done" it's going to invoke this. This is just a special object rotation you can use if you're going to pass any parameters to it, so they can accept them here.

So that's it for now, I'm going to go into more detail for the other options for scope, and what they mean and how they work and the differences between them and when we use them in the next few videos.

Featured series:

JavaScript Arrays in Depth

JavaScript Arrays in Depth