Introduction

In AngularJS controllers, both $scope and this can expose data to the view, but they lead to different code styles. In most non-legacy AngularJS code, this with controllerAs is the cleaner default, while $scope remains useful for a few framework-specific tasks such as watches, events, and integration with older code.

What $scope Does

$scope is the object AngularJS uses for view binding and scope inheritance. In older tutorials, controllers often attach everything directly to it.

1app.controller('UserController', function ($scope) {
2    $scope.name = 'Ava';
3    $scope.rename = function (value) {
4        $scope.name = value;
5    };
6});

That works, but it also means your controller logic is tightly coupled to AngularJS scope behavior, including prototypal inheritance quirks in nested scopes.

What this Does

Inside a controller, this refers to the controller instance. Combined with controllerAs, it gives you a view-model style API that is easier to read and reason about.

1app.controller('UserController', function () {
2    var vm = this;
3    vm.name = 'Ava';
4    vm.rename = function (value) {
5        vm.name = value;
6    };
7});

Template:

1<div ng-controller="UserController as vm">
2  <p>{{ vm.name }}</p>
3  <button ng-click="vm.rename('Mina')">Rename</button>
4</div>

This makes it obvious where each property comes from and avoids the “which scope am I on” confusion common in larger AngularJS templates.

Why controllerAs Became Preferred

The controllerAs style has three big advantages.

First, it reads like normal object-oriented JavaScript. The template refers to vm.name, not an implicit scope chain.

Second, it reduces scope inheritance problems. Nested directives and repeated templates can create child scopes, and direct $scope usage can make property shadowing harder to debug.

Third, it aligns better with the component style that later became standard in modern Angular. Even in old AngularJS codebases, that makes controllers easier to maintain.

When $scope Is Still Useful

$scope did not become obsolete. Some AngularJS APIs still interact with it directly, especially:

• '$watch'
• '$on and $emit'
• manual digest-related integration with non-Angular code

Example:

1app.controller('CounterController', function ($scope) {
2    var vm = this;
3    vm.count = 0;
4
5    $scope.$watch(
6        function () { return vm.count; },
7        function (newValue) {
8            console.log('count changed to', newValue);
9        }
10    );
11});

In other words, use this for public controller state and methods, and keep $scope for the smaller set of framework hooks that genuinely need it.

The this Binding Trap

One reason AngularJS developers often write var vm = this; is JavaScript binding behavior. Inside callbacks, this may no longer refer to the controller unless you preserve it.

1app.controller('TimerController', function ($timeout) {
2    var vm = this;
3    vm.value = 0;
4
5    $timeout(function () {
6        vm.value = 1;
7    }, 1000);
8});

Using vm avoids accidental rebinding and keeps the code stable across callbacks.

Common Pitfalls

The biggest mistake is mixing $scope properties and this properties arbitrarily in the same controller. That makes the template and controller contract harder to follow.

Another mistake is using this in callbacks without preserving the reference. In plain JavaScript functions, this can change unexpectedly.

A third mistake is assuming controllerAs removes every need for $scope. It does not. Some AngularJS APIs still depend on it.

Summary

• '$scope and this can both expose controller data, but they encourage different styles.'
• 'this plus controllerAs is usually cleaner and easier to maintain.'
• '$scope is still useful for watches, events, and certain AngularJS-specific hooks.'
• Use a stable alias such as vm to avoid this binding problems in callbacks.
• Avoid mixing both styles randomly inside the same controller.