The controllerAs syntax exposes your controller to the template, so rather than binding a bunch of properties to $scope in your controller, you can make them properties of an instance of your controller. (Controllers are JavaScript "class" constructors.)

So if you have the following:

angular.module('myApp')
  .controlller('MyController', function() {
    var vm = this;
    this.foo = 'bar';
  });

...you can access it in your template like this:

<div ng-controller="MyController as vm">
  {{ vm.foo }}
</div>

Now, if you want to access scope variables in your controller -- or call a scope method such as $on -- you still need to inject $scope into your controller. Note the $ before scope, which indicates it is a service. This $scope service simply exposes the current scope.

All of that said, if you find yourself injecting $scope into your controller, you should question your approach. Better to create a custom directive and access scope via the link function, or access scope from the template.

Recommended reading: http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

The controllerAs syntax exposes your controller to the template, so rather than binding a bunch of properties to $scope in your controller, you can make them properties of an instance of your controller. (Controllers are JavaScript "class" constructors.)

So if you have the following:

angular.module('myApp')
  .controlller('MyController', function() {
    var vm = this;
    vm.foo = 'bar';
  });

...you can access it in your template like this:

<div ng-controller="MyController as vm">
  {{ vm.foo }}
</div>

Now, if you want to access scope variables in your controller -- or call a scope method such as $on -- you still need to inject $scope into your controller. Note the $ before scope, which indicates it is a service. This $scope service simply exposes the current scope.

All of that said, if you find yourself injecting $scope into your controller, you should question your approach. Better to create a custom directive and access scope via the link function, or access scope from the template.

Recommended reading: http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

The controllerAs syntax exposes your controller to the template, so rather than binding a bunch of properties to $scope in your controller, you can make them properties of an instance of your controller. (Note: Controllers are JavaScript "class" constructors.)

So if you have the following:

angular.module('myApp')
  .controlller('MyController', function() {
    var vm = this;
    this.foo = 'bar';
  });

...you can access it in your template like this:

<div ng-controller="MyController as vm">
  {{ vm.foo }}
</div>

Now, if you want to access scope variables in your controller -- or call a scope method such as $on -- you still need to inject $scope into your controller. Note the $ before scope, which indicates it is a service. This $scope service simply exposes the current scope.

All of that said, if you find yourself injecting $scope into your controller, you should question your approach. Better to create a custom directive and access scope via the link function, or access scope from the template.

Recommended reading: http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/

The controllerAs syntax exposes your controller to the template, so rather than binding a bunch of properties to $scope in your controller, you can make them properties of an instance of your controller. (Controllers are JavaScript "class" constructors.)

So if you have the following:

angular.module('myApp')
  .controlller('MyController', function() {
    var vm = this;
    this.foo = 'bar';
  });

...you can access it in your template like this:

<div ng-controller="MyController as vm">
  {{ vm.foo }}
</div>

Now, if you want to access scope variables in your controller -- or call a scope method such as $on -- you still need to inject $scope into your controller. Note the $ before scope, which indicates it is a service. This $scope service simply exposes the current scope.

All of that said, if you find yourself injecting $scope into your controller, you should question your approach. Better to create a custom directive and access scope via the link function, or access scope from the template.

Recommended reading: http://www.johnpapa.net/do-you-like-your-angular-controllers-with-or-without-sugar/