$scope vs var in AngularJS

Question

I\'ve been using var and $scope.varname and both work fine in AngularJS. I was wondering if there was a difference between the two functionally, and what best practice was i

Answer 1

$scope bind value to the view and var is the local variable to the application.

Answer 2

Yes! $scope variables bind to the view where as var does not and is local to the function it was declared in!

var x = 3;
$scope.y = 3;

{{x}} - undefined
{{y}} - 3

Answer 3

The technical implications of using var and $scope have been described by @tymeJV and others. I think the next logical question answer is: When do I use either?

TL;DR - if you do not use a variable in a view (e.g. {{myVar}} ), use var.

The reason is two fold:

1. Encapsulation - hide state that is not necessary to the view. This will prevent unintended modifications of the variable.

2. Performance (prevent extra digest cycles) - Angular performs "dirty state" checking on variables. Modifying a variable that's not used in the view may cause extra digest cycles unnecessarily. In an application with a couple of ng-repeats and a bunch of watches, this can have a huge impact.

Answer 4

1 - $scope, is the glue between your controller and your view/model , when you are defining a variable/function to the $scope of a controller, your whole view , which this controller controls it ! , can see that variable/function . Where a pure variable just works in that controller , not even the view of that controller!

2- Every thing that has been defined to the $scope , is manupulatable from the outside of the controller , throughout the Directives , Services , your html view ... , while a pure variable is NOT;

Answer 5

Simply spoken - all variables you define on $scope, e.g. in your controller, are available in your html markup. in case you need a variable just inside your js functions, you can declare it with var, they are only locally available. Same with functions.