AngularJS - Controller - "Controller as vs $scope"

This the continuation of my previous post. Here I am going to discuss the difference in the two syntax of writing controllers.

• The "controller as" syntax is the new technique of writing controllers, which was introduced in AngulraJS official release 1.2.0. The $scope is an older technique and is available since the initial version of the AngularJS is released.

• The "controller as" technique makes code more readable when working with nested scope. Example: Lets say we need to show the data in following way:Controller 

                   Country

                   Country - State

                   Country - State - City

• Using Older technique: "$scope"

                         Define Controller:

                               angular.module("myApp", [])

                                     .controller("countryController", function($scope) {

                                           $scope.name "India";

                                     })

                                     .controller("stateController", function($scope) {

                                           $scope.name "Karnataka";

                                     })

                                     .controller("cityController", function($scope) {

                                           $scope.name "Bangalore";

                                     });

                         Using Controller:

                               <div ng-controller ="countryController">

                                     {{name}}  

                                     <div ng=controller="stateController">
                                          {{$parent.name}} - {{name}}
                                          <div ng= "cityController">
                                               {{$parent.$parent.name}} - {{$parent.name}} - {{name}}

                                          <div>

                                     <div>

                               <div>                               

• Using New technique: "controller as"

                         Define Controller:

                               angular.module("myApp", [])

                                     .controller("countryController", function() {

                                           this.name "India";

                                     })

                                     .controller("stateController", function() {

                                           this.name "Karnataka";

                                     })

                                     .controller("cityController", function() {

                                           this.name "Bangalore";

                                     });

                         Using Controller:

                               <div ng-controller ="countryController as countryCtrl">

                                     {{countryCtrl.name}}  

                                     <div ng=controller="stateController as stateCtrl">
                                          {{countryCtrl.name}} - {{stateCtrl.name}}
                                          <div ng= "cityController as cityCtrl">
                                               {{$countryCtrl.name}} - {{stateCtrl.name}} - {{cityCtrl.name}}

                                          <div>

                                     <div>

                               <div>              

• In older syntax the $scope object need to be injected in controller function, in new syntax (controller as) we don'e need to inject the $scope object,  unless you need it for some other purpose.

There is neither good nor bad in using either of the syntax while writing controllers. Its purely developer's call to use any syntax he/she prefers.