AngularJS controller as vs scope

Suggested Videos
Part 31 - AngularJS page refresh problem
Part 32 - AngularJS controller as syntax
Part 33 - Angular nested scopes and controller as syntax



In this video we will discuss the difference between $scope and CONTROLLER AS syntax. This is continuation to Part 33. Please watch Part 33 from AngularJS Tutorial before proceeding.



There are 2 ways to expose the members from the controller to the view - $scope and CONTROLLER AS. The obvious question that comes to our mind at this point is - Why do we have 2 ways of doing the same thing. Which one to use over the other and what are the differences.

Here are the differences
1. CONTROLLER AS syntax is new and is officially released in 1.2.0. $scope is the old technique and is available since the initial version of angular is released.

2. You can use either one of thes techniques. Both have their own uses. For example, CONTROLLER AS syntax makes your code more readable when working with nested scopes. We discussed this in our previous video.

3. If you want to use $scope it has to be injected into controller function, where as with CONTROLLER AS syntax there is no need for such injection, unless you need it for something else.

Which one to use depends on your personal preference. Some prefer using $scope while others prefer using CONTROLLER AS syntax. One important thing to keep in mind is that, though you are using CONTROLLER AS syntax, behind the scenes angular is still using $scope. Angular takes the controller instance and adds it as a reference on the scope. 

<div ng-controller="cityController as cityCtrl">

    {{cityCtrl.name}}

</div>

In the above example since we are using CONTROLLER AS syntax, angular takes cityCtrl which is the instance of cityController and adds it as a reference on the scope. So in the binding expression, you can read it as $scope.cityCtrl.name