AngularJS - Isolated Scopes - @ vs = vs &

Directive is the most powerful feature of AngularJS framework. Every directive can have scope , which can either be inherited from its parent scope or else it can have its own scope ( isolated scope ). Here, working with isolated scopes is the tricky part but understanding about it will make it easy and powerful.

Directive - which uses parent scope

.directive("myWidget",function() {
  return {
    template : "<div> {{name}} </div>"
    // no explicit scope property

Directive - which has its own scope ( isolated scope )

.directive("myWidget",function() {
  return {
    template : "<div> {{ name }} </div>",
    scope : {
      name : "@"

Here, scope : {...} will create an isolated scope for the directive.

@ vs = vs &



@ - one way binding

Using this , you can bind a value from parent scope to isolated scope . Here , changing of bound value in isolated scope will not affect the parent scope value. In short, a string value will be passed from parent scope to isolated scope using this method.

Example - Directive scope ( isolated scope ):

scope : { nameValue : "@name" }

Example - binding of value in view ( parent scope ) :

  • <my-widget name="{{nameFromParentScope}}"></my-widget>
  • <my-widget name="CodeForEach Widget"></my-widget>


= - two way binding

Using this, you can bind a value from parent scope to islated scope. Here, change in parent scope will get reflected in isolated scope and also the other way around. Which means that the change in isolated scope will also get reflected in the parent scope.

scope : { nameValue : "=name" },
link : function(scope) { = "Changing the value here will get reflected in parent scope value";

Example View :

<my-widget name="{{nameFromParentScope}}"></my-widget>


& - Function call

Using this, you can call a function in parent scope from isolated scope.

scope : { nameChange : "&" }
link : function(scope) {

Example View :

<my-widget nameChange="onNameChange(newName)"></my-widget>




Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>