In the "Create Components" section of AngularJS's homepage, there is this example:

controller: function($scope, $element) {
  var panes = $scope.panes = [];
  $scope.select = function(pane) {
    angular.forEach(panes, function(pane) {
      pane.selected = false;
    });
    pane.selected = true;
  }
  this.addPane = function(pane) {
    if (panes.length == 0) $scope.select(pane);
    panes.push(pane);
  }
}

Notice how the select method is added to $scope, but the addPane method is added to this. If I change it to $scope.addPane, the code breaks.

The documentation says that there in fact is a difference, but it doesn't mention what the difference is:

Previous versions of Angular (pre 1.0 RC) allowed you to use this interchangeably with the $scope method, but this is no longer the case. Inside of methods defined on the scope this and $scope are interchangeable (angular sets this to $scope), but not otherwise inside your controller constructor.

How does this and $scope work in AngularJS controllers?

upvote
  flag
I find this confusing also. When a view specifies a controller (e.g., ng-controller='...'), the $scope associated with that controller seems to come along with it, because the view can access $scope properties. But when a directive 'require's another controller (and then uses it in its linking function), the $scope associated with that other controller doesn't come along with it? – Mark Rajcok
upvote
  flag
Is that confusing quote about "Previous versions..." been removed by now? Then maybe update would be in place? – Dmitri Zaitsev

6 Answers 11

The reason 'addPane' is assigned to this is because of the <pane> directive.

The pane directive does require: '^tabs', which puts the tabs controller object from a parent directive, into the link function.

addPane is assigned to this so that the pane link function can see it. Then in the pane link function, addPane is just a property of the tabs controller, and it's just tabsControllerObject.addPane. So the pane directive's linking function can access the tabs controller object and therefore access the addPane method.

I hope my explanation is clear enough.. it's kind of hard to explain.

3 upvote
  flag
Thanks for the explanation. The docs make it seem that the controller is just a function that sets up the scope. Why does the controller get treated like an object if all the action happens in the scope? Why not just pass the parent scope into the linking function? Edit: To better phrase this question, if controller methods and scope methods both operate on the same data structure (the scope), why not put them all in one place? – Alexei Boronine
upvote
  flag
It seems the parent scope isn't passed into the lnk func because of the desire to support "reusable components, which should not accidentally read or modify data in the parent scope." But if a directive really does want/need to read or modify SOME SPECIFIC data in the parent scope (like the 'pane' directive does), it requires some effort: 'require' the controller where the desired parent scope is, then define a method on that controller (use 'this' not $scope) to access specific data. Since the desired parent scope is not injected into the lnk func, I suppose this is the only way to do it. – Mark Rajcok
1 upvote
  flag
Hey mark, it's actually easier to modify the directive's scope. You can just use the link function jsfiddle.net/TuNyj – Andrew Joslin
3 upvote
  flag
Thanks @Andy for the fiddle. In your fiddle, the directive is not creating a new scope, so I can see how the link function can directly access the controller's scope here (since there is only one scope). The tabs and pane directives use isolate scopes (i.e., new child scopes are created that do not prototypically inherit from the parent scope). For the isolate scope case, it seems that defining a method on a controller (using 'this') is the only way to allow another directive to get (indirect) access to the other (isolated) scope. – Mark Rajcok
up vote 911 down vote accepted

"How does this and $scope work in AngularJS controllers?"

Short answer:

  • this
    • When the controller constructor function is called, this is the controller.
    • When a function defined on a $scope object is called, this is the "scope in effect when the function was called". This may (or may not!) be the $scope that the function is defined on. So, inside the function, this and $scope may not be the same.
  • $scope
    • Every controller has an associated $scope object.
    • A controller (constructor) function is responsible for setting model properties and functions/behaviour on its associated $scope.
    • Only methods defined on this $scope object (and parent scope objects, if prototypical inheritance is in play) are accessible from the HTML/view. E.g., from ng-click, filters, etc.

Long answer:

A controller function is a JavaScript constructor function. When the constructor function executes (e.g., when a view loads), this (i.e., the "function context") is set to the controller object. So in the "tabs" controller constructor function, when the addPane function is created

this.addPane = function(pane) { ... }

it is created on the controller object, not on $scope. Views cannot see the addPane function -- they only have access to functions defined on $scope. In other words, in the HTML, this won't work:

<a ng-click="addPane(newPane)">won't work</a>

After the "tabs" controller constructor function executes, we have the following:

after tabs controller constructor function

The dashed black line indicates prototypal inheritance -- an isolate scope prototypically inherits from Scope. (It does not prototypically inherit from the scope in effect where the directive was encountered in the HTML.)

Now, the pane directive's link function wants to communicate with the tabs directive (which really means it needs to affect the tabs isolate $scope in some way). Events could be used, but another mechanism is to have the pane directive require the tabs controller. (There appears to be no mechanism for the pane directive to require the tabs $scope.)

So, this begs the question: if we only have access to the tabs controller, how do we get access to the tabs isolate $scope (which is what we really want)?

Well, the red dotted line is the answer. The addPane() function's "scope" (I'm referring to JavaScript's function scope/closures here) gives the function access to the tabs isolate $scope. I.e., addPane() has access to the "tabs IsolateScope" in the diagram above because of a closure that was created when addPane() was defined. (If we instead defined addPane() on the tabs $scope object, the pane directive would not have access to this function, and hence it would have no way to communicate with the tabs $scope.)

To answer the other part of your question: how does $scope work in controllers?:

Within functions defined on $scope, this is set to "the $scope in effect where/when the function was called". Suppose we have the following HTML:

<div ng-controller="ParentCtrl">
   <a ng-click="logThisAndScope()">log "this" and $scope</a> - parent scope
   <div ng-controller="ChildCtrl">
      <a ng-click="logThisAndScope()">log "this" and $scope</a> - child scope
   </div>
</div>

And the ParentCtrl (Solely) has

$scope.logThisAndScope = function() {
    console.log(this, $scope)
}

Clicking the first link will show that this and $scope are the same, since "the scope in effect when the function was called" is the scope associated with the ParentCtrl.

Clicking the second link will reveal this and $scope are not the same, since "the scope in effect when the function was called" is the scope associated with the ChildCtrl. So here, this is set to ChildCtrl's $scope. Inside the method, $scope is still the ParentCtrl's $scope.

Fiddle

I try to not use this inside of a function defined on $scope, as it becomes confusing which $scope is being affected, especially considering that ng-repeat, ng-include, ng-switch, and directives can all create their own child scopes.

1 upvote
  flag
When a function defined on a $scope object is called, this is the "scope in effect when the function was called". This may (or may not!) be the $scope that the function is defined on. So, inside the function, this and $scope may not be the same. But the AngularJS official documentation states, Inside of methods defined on the scope this and $scope are interchangeable (angular sets this to $scope), but not otherwise inside your controller constructor. – tamakisquare
6 upvote
  flag
@tamakisquare, I believe the bolded text you quoted applies to when the controller constructor function is called -- i.e., when the controller is created = associated with a $scope. It does not apply later, when arbitrary JavaScript code calls a method defined on a $scope object. – Mark Rajcok
upvote
  flag
Thanks Mark. I re-read the part of the official doc a few more times; The sixth bullet following "A Spicy Controller Example". I still think the doc is saying that this and $scope are interchangeable when used inside of methods defined on the scope. It doesn't mention that the interchangeability depends on where the methods are called, so I would assume that shouldn't matter. But, obviously, your provided example has proved otherwise. – tamakisquare
upvote
  flag
I would like to suggest you to open up a ticket with AngularJS's github mentioning the ambiguity/inaccuracy of the official doc, along with your example in fiddle. – tamakisquare
upvote
  flag
@tamakisquare, I should re-read my own answer! "When the controller constructor function is called, this is the controller", not the $scope. So, I suppose that quote from the official docs only applies if you call a $scope method from someplace where that same $scope is in effect. – Mark Rajcok
74 upvote
  flag
Note that is it now possible to call the addPane() function directly in the template by naming the controller: "MyController as myctrl" and then myctrl.addPane(). See docs.angularjs.org/guide/concepts#controller – Christophe Augier
upvote
  flag
I don't understand , so why here (jsbin.com/EduxOkuX/2/edit) both lines are the same ? – Royi Namir
upvote
  flag
@RoyiNamir, "Only methods defined on the $scope object (and parent scope objects, if prototypical inheritance is in play) are accessible from the HTML/view" -- this includes using curly braces in the view, e.g., {{someScopeVariable}}. The view can't see the variables you assigned to this in the ChildController. – Mark Rajcok
upvote
  flag
"It does not prototypically inherit from the scope in effect where the directive was encountered in the HTML." This seems to contradict the following definitive account of scope... github.com/angular/angular.js/wiki/Understanding-Scopes - "In AngularJS, a child scope normally prototypically inherits from its parent scope." – Ian Warburton
6 upvote
  flag
so is it the case that you should avoid this and just use scope? or am I missing something? – ErichBSchulz
72 upvote
  flag
Too much inherent complexity. – Inanc Gumus
upvote
  flag
It it possible to invoke a function defined on the controller form the browsers console? – martinoss
upvote
  flag
I want to add a link to this fiddle -> jsfiddle.net/sbZw7/241 - Here the logThisAndScope function is added to the child controller. You'll now see that it returns the same object for this and $scope. This is expected because the ng-click looks for the function on it's local $scope then moves up the scope chain. – Nicholas Dynan
10 upvote
  flag
This is a very informative answer, but when I came back with a practical problem (how to invoke $scope.$apply() in a controller method defined using 'this') I could not work it out. So while this is still a useful answer, I am finding the "inherent complexity" baffling. – dumbledad
upvote
  flag
"Inside the method, $scope is still the ParentCtrl's $scope"...can you explain this please? Why is $scope not the child controllers $scope? – smackenzie
upvote
  flag
@smackenzie, when function logThisAndScope() is created, the ParentCtrl's $scope becomes part of the closure associated with the function. So when the function accesses variable $scope, it finds it in the closure. – Mark Rajcok
6 upvote
  flag
Javascript - lots of rope [to hang yourself]. – AlikElzin-kilaka
upvote
  flag
jsfiddle.net/sbZw7/444 its not working in latest version – albert Jegani
upvote
  flag
Thanks for the clarification, just one more why when Clicking the second link will reveal, the $scope is still the ParentCtrl's $scope.? – user2499325
2 upvote
  flag
@user2499325, function logThisAndScope creates a closure, and variable $scope (the one associated with ParentCtrl) is part of that closure. When the second link is clicked, there is no logThisAndScope function defined on the ChildCtrl's $scope, so prototypical inheritance kicks in and the parent $scope (the one associated with the ParentCtrl) is examined. A logThisAndScope function is found on that $scope and it is executed. When that function logs $scope it is the $scope associated with the closure, hence the one associated with ParentCtrl. I hope that helps. – Mark Rajcok
upvote
  flag
How does this work when the controller function is called via the $controller service? More specifically, would ctrlInstance have any properties that were defined in the controller function using this.property = value? ($scope is passed in via the locals) My guess is no. – Tahsis Claus
2 upvote
  flag
upvote
  flag
@AlikElzin-kilaka eh, this is more of an issue with Angular, not JavaScript. – Dan Pantry
upvote
  flag
Is the same explanation applies to Angular 1.6? – Mr_Green
1 upvote
  flag
don't use "this", avoid it, unless you are doing absolutely pure OOP. "this" is an OOP construct, it's better to use JS in a more functional style because of nested functions. that is all. I will not be using "this" in place of $scope in any of my angular code, thank you very much. – Alexander Mills
upvote
  flag
Good explanation. Thanks – John

Previous versions of Angular (pre 1.0 RC) allowed you to use this interchangeably with the $scope method, but this is no longer the case. Inside of methods defined on the scope this and $scope are interchangeable (angular sets this to $scope), but not otherwise inside your controller constructor.

To bring back this behaviour (does anyone know why was it changed?) you can add:

return angular.extend($scope, this);

at the end of your controller function (provided that $scope was injected to this controller function).

This has a nice effect of having access to parent scope via controller object that you can get in child with require: '^myParentDirective'

7 upvote
  flag
This article provides a good explanation of why this and $scope are different. – Robert Martin

I just read a pretty interesting explanation on the difference between the two, and a growing preference to attach models to the controller and alias the controller to bind models to the view. http://toddmotto.com/digging-into-angulars-controller-as-syntax/ is the article. He doesn't mention it but when defining directives, if you need to share something between multiple directives and don't want a service (there are legitimate cases where services are a hassle) then attach the data to the parent directive's controller. The $scope service provides plenty of useful things, $watch being the most obvious, but if all you need to to bind data to the view, using the plain controller and 'controller as' in the template is fine, and arguably preferable.

In this course(https://www.codeschool.com/courses/shaping-up-with-angular-js) they explain how to use "this" and many other stuff.

If you add method to the controller through "this" method, you have to call it in the view with controller's name "dot" your property or method.

For example using your controller in the view you may have code like this:

    <div data-ng-controller="YourController as aliasOfYourController">

       Your first pane is {{aliasOfYourController.panes[0]}}

    </div>
6 upvote
  flag
After going through the course, I was immediately confused by code using $scope, so thanks for mentioning it. – Matt Montag
15 upvote
  flag
That course does not mention $scope at all, they just use as and this so how can it help explain the difference? – dumbledad
10 upvote
  flag
My first touch with Angular was from the mentioned course, and as $scope was never referred, I learned to use just this in the controllers. The problem is that when you start to have tohandle promises in your controller, you have a lot of references problem to this and have to start doing things like var me = this to reference the model in this from within the promise return function. So because of that, I'm still very confused about which method should me used, $scope or this. – Bruno Finger
upvote
  flag
@BrunoFinger Unfortunately, you'll need var me = this or .bind(this) whenever you do Promises, or other closure-heavy stuff. It has nothing to do with Angular. – Dzmitry Lazerka
upvote
  flag
@DzmitryLazerka You're absolutely right but if we are careful enough we can avoid writing such ugly code. In fact re-reading my comment today, I'm even embarrassed to say something as handle promises within the controller. This kind of logic belongs somewhere else in the application. I'm graviting towards having them in another layer of service interfacing the $scope. This makes complex logics much more reusable. – Bruno Finger
upvote
  flag
The important thing is to know that ng-controller="MyCtrl as MC" is equivalent to putting $scope.MC = this in the controller itself -- it defines an instance (this) of MyCtrl on the scope for use in the template via {{ MC.foo }} – William B

I recommend you to read the following post: http://codetunnel.io/angularjs-controller-as-or-scope/

it describes very well the advantages of using "Controller as" to expose variables over "$scope".

I know you asked specifically about methods and not variables, but I think that it's better to stick to one technique and be consistent with it.

So for my opinion, because of the variables issue discussed in the post, it's better to just use the "Controller as" technique and also apply it to the methods.

Not the answer you're looking for? Browse other questions tagged or ask your own question.