Home » Angularjs » What is the difference between '@' and '=' in directive scope in AngularJS?

What is the difference between '@' and '=' in directive scope in AngularJS?

Posted by: admin November 2, 2017 Leave a comment


I’ve read the AngularJS documentation on the topic carefully, and then fiddled around with a directive. Here’s the fiddle.

And here are some relevant snippets:

  • From the HTML:

    <pane bi-title="title" title="{{title}}">{{text}}</pane>
  • From the pane directive:

    scope: { biTitle: '=', title: '@', bar: '=' },

There are several things I don’t get:

  • Why do I have to use "{{title}}" with '@' and "title" with '='?
  • Can I also access the parent scope directly, without decorating my element with an attribute?
  • The documentation says “Often it’s desirable to pass data from the isolated scope via an expression and to the parent scope”, but that seems to work fine with bidirectional binding too. Why would the expression route be better?

I found another fiddle that shows the expression solution too: http://jsfiddle.net/maxisam/QrCXh/


Why do I have to use “{{title}}” with ‘@‘ and “title” with ‘=‘?

@ binds a local/directive scope property to the evaluated value of the DOM attribute. If you use title=title1 or title="title1", the value of DOM attribute “title” is simply the string title1. If you use title="{{title}}", the value of the DOM attribute “title” is the interpolated value of {{title}}, hence the string will be whatever parent scope property “title” is currently set to. Since attribute values are always strings, you will always end up with a string value for this property in the directive’s scope when using @.

= binds a local/directive scope property to a parent scope property. So with =, you use the parent model/scope property name as the value of the DOM attribute. You can’t use {{}}s with =.

With @, you can do things like title="{{title}} and then some" — {{title}} is interpolated, then the string “and them some” is concatenated with it. The final concatenated string is what the local/directive scope property gets. (You can’t do this with =, only @.)

With @, you will need to use attr.$observe('title', function(value) { ... }) if you need to use the value in your link(ing) function. E.g., if(scope.title == "...") won’t work like you expect. Note that this means you can only access this attribute asynchronously.
You don’t need to use $observe() if you are only using the value in a template. E.g., template: '<div>{{title}}</div>'.

With =, you don’t need to use $observe.

Can I also access the parent scope directly, without decorating my element with an attribute?

Yes, but only if you don’t use an isolate scope. Remove this line from your directive

scope: { ... }

and then your directive will not create a new scope. It will use the parent scope. You can then access all of the parent scope properties directly.

The documentation says “Often it’s desirable to pass data from the isolated scope via an expression and to the parent scope”, but that seems to work fine with bidirectional binding too. Why would the expression route be better?

Yes, bidirectional binding allows the local/directive scope and the parent scope to share data. “Expression binding” allows the directive to call an expression (or function) defined by a DOM attribute — and you can also pass data as arguments to the expression or function. So, if you don’t need to share data with the parent — you just want to call a function defined in the parent scope — you can use the & syntax.

See also


There are a lot of great answers here, but I would like to offer my perspective on the differences between @, =, and & binding that proved useful for me.

All three bindings are ways of passing data from your parent scope to your directive’s isolated scope through the element’s attributes:

  1. @ binding is for passing strings.
    These strings support {{}} expressions for interpolated values.
    For example:
    . The interpolated expression is evaluated against
    directive’s parent scope.

  2. = binding is for two-way model binding. The model in parent scope
    is linked to the model in the directive’s isolated scope. Changes to
    one model affects the other, and vice versa.

  3. & binding is for passing a method into your directive’s scope so that
    it can be called within your directive. The method is pre-bound to
    the directive’s parent scope, and supports arguments. For example if the method is hello(name) in parent scope, then in
    order to execute the method from inside your directive, you must
    call $scope.hello({name:’world’})

I find that it’s easier to remember these differences by referring to the scope bindings by a shorter description:

  • @ Attribute string binding
  • = Two-way model binding
  • & Callback method binding

The symbols also make it clearer as to what the scope variable represents inside of your directive’s implementation:

  • @ string
  • = model
  • & method

In order of usefulness (for me anyways):

  1. =
  2. @
  3. &

The = means bi-directional binding, so a reference to a variable to the parent scope. This means, when you change the variable in the directive, it will be changed in the parent scope as well.

@ means the variable will be copied (cloned) into the directive.

As far as I know, <pane bi-title="{{title}}" title="{{title}}">{{text}}</pane> should work too. bi-title will receive the parent scope variable value, which can be changed in the directive.

If you need to change several variables in the parent scope, you could execute a function on the parent scope from within the directive (or pass data via a service).


If you would like to see more how this work with a live example. http://jsfiddle.net/juanmendez/k6chmnch/

var app = angular.module('app', []);
app.controller("myController", function ($scope) {
    $scope.title = "binding";
app.directive("jmFind", function () {
    return {
        replace: true,
        restrict: 'C',
        transclude: true,
        scope: {
            title1: "=",
            title2: "@"
        template: "<div><p>{{title1}} {{title2}}</p></div>"


@ get as string

  • This does not create any bindings whatsoever. You’re simply getting the word you passed in as a string

= 2 way binding

  • changes made from the controller will be reflected in the reference held by the directive, and vice-versa

& This behaves a bit differently, because the scope gets a function that returns the object that was passed in. I’m assuming this was necessary to make it work. The fiddle should make this clear.

  • After calling this getter function, the resulting object behaves as follows:
    • if a function was passed: then the function is executed in the parent (controller) closure when called
    • if a non-function was passed in: simply get a local copy of the object that has no bindings

This fiddle should demonstrate how they work. Pay special attention to the scope functions with get... in the name to hopefully better understand what I mean about &


There are three ways scope can be added in the directive:

  1. Parent scope: This is the default scope inheritance.

The directive and its parent(controller/directive inside which it lies) scope is same.
So any changes made to the scope variables inside directive are reflected in the parent controller as well. You don’t need to specify this as it is default.

  1. Child scope: directive creates a child scope which inherits from the parent scope if you specify the scope variable of the directive as true.

Here, if you change the scope variables inside directive, it wont reflect in the parent scope, but if you change the property of a scope variable, that is reflected in the parent scope, as you actually modified the scope variable of the parent.


app.directive("myDirective", function(){

    return {
        restrict: "EA",
        scope: true,
        link: function(element, scope, attrs){
            scope.somvar = "new value"; //doesnot reflect in the parent scope
            scope.someObj.someProp = "new value"; //reflects as someObj is of parent, we modified that but did not override.
  1. Isolated scope: This is used when you want to create scope that does not inherit from the controller scope.

This happens when you are creating plugins as this makes the directive generic, since it can be placed in any html and does not gets affected by its parent scope.

Now, if you dont want any interaction with the parent scope, then you can just specify scope as empty object. like,

scope: {} //this does not interact with the parent scope in any way

Mostly this is not the case as we need some interaction with the parent scope, so we want some of the values/ changes to pass through.
For this reason we use:

1. "@"   (  Text binding / one-way binding )
2. "="   ( Direct model binding / two-way binding )
3. "&"   ( Behaviour binding / Method binding  )

@ means that the changes from the controller scope will be reflected in the directive scope but if you modify the value in the directive scope, the controller scope variable will not get affected.

@ always expects the mapped attribute to be an expression. This is very important; because to make the “@” prefix work, we need to wrap the attribute value inside {{}}.

= is birectional so if you change the variable in directive scope, the controller scope variable gets affected as well

& is used to bind controller scope method so that if needed we can call it from the directive

Advantage here is that, the name of variable need not be same in controller scope and directive scope.

Example, directive scope has a variable “dirVar” which syncs with variable “contVar” of the controller scope. This gives a lot of power and generalisation to the directive as one controller can sync with variable v1 while another controller using the same directive can ask dirVar to sync with variable v2.

Below is the example of usage:

The directive and controller are:

 var app = angular.module("app", []);
 app.controller("MainCtrl", function( $scope ){
    $scope.name = "Harry";
    $scope.color = "#333333";
    $scope.reverseName = function(){
     $scope.name = $scope.name.split("").reverse().join("");
    $scope.randomColor = function(){
        $scope.color = '#'+Math.floor(Math.random()*16777215).toString(16);
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {
            name: "@",
            color: "=",
            reverse: "&"
        link: function(element, scope, attrs){
           //do something like
          //calling the controllers function

And the html(note the differnce for @ and =):

<div my-directive
  color="color" >

Here is a link to the blog which describes it nicely.


Simply we can use:-

  1. @ :- for String values for one way Data binding. in one way data binding you can only pass scope value to directive

  2. = :- for object value for two way data binding. in two way data binding you can change the scope value in directive as well as in html also.

  3. & :- for methods and functions.


In our Component definition for Angular version 1.5 And above
there are four different type of bindings:

  1. = Two-way data binding :- if we change the value,it automatically update
  2. < one way binding :- when we just want to read a parameter from a parent scope and not update it.

  3. @ this is for String Parameters

  4. & this is for Callbacks in case your component needs to output something to its parent scope


I created a little HTML file that contains Angular code demonstrating the differences between them:


<!DOCTYPE html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <body ng-app="myApp">
    <div ng-controller="myCtrl as VM">
      <a my-dir
    angular.module("myApp", [])
    .controller("myCtrl", [function(){
      var vm = this;
      vm.sayHi = function(name){
        return ("Hey there, " + name);
    .directive("myDir", [function(){
      var directive = {
        scope: { attr1: "=", attr2: "@", attr3: "&" },
        link: function(scope){
          console.log(scope.attr1);   // logs "Hey there, Juan"
          console.log(scope.attr2);   // logs "VM.sayHi('Juan')"
          console.log(scope.attr3);   // logs "function (a){return h(c,a)}"
          console.log(scope.attr3()); // logs "Hey there, Juan"
      return directive;


The = way is 2-way binding, which lets you to have live changes inside your directive. When someone changes that variable out of directive, you will have that changed data inside your directive, but @ way is not two-ways binding. It works like Text. You bind once, and you will have only its value.

To get it more clearly, you can use this great article:

AngularJS Directive Scope ‘@’ and ‘=’


@ local scope property is used to access string values that are defined outside the directive.

= In cases where you need to create a two-way binding between the outer scope and the directive’s isolate scope you can use the = character.

& local scope property allows the consumer of a directive to pass in a function that the directive can invoke.

Kindly check the below link which gives you clear understanding with examples.I found it really very useful so thought of sharing it.



I implemented all the possible options in a fiddle.

It deals with all the options:









Even when the scope is local, as in your example, you may access the parent scope through the property $parent. Assume in the code below, that title is defined on the parent scope. You may then access title as $parent.title:

link : function(scope) { console.log(scope.$parent.title) },
template : "the parent has the title {{$parent.title}}"

However in most cases the same effect is better obtained using attributes.

An example of where I found the “&” notation, which is used “to pass data from the isolated scope via an expression and to the parent scope”, useful (and a two-way databinding could not be used) was in a directive for rendering a special datastructure inside an ng-repeat.

<render data = "record" deleteFunction = "dataList.splice($index,1)" ng-repeat = "record in dataList" > </render>

One part of the rendering was a delete button and here it was useful to attach a deletefunction from the outside scope via &. Inside the render-directive it looks like

scope : { data = "=", deleteFunction = "&"},
template : "... <button ng-click = "deleteFunction()"></button>"

2-way databinding i.e. data = "=" can not be used as the delete function would run on every $digest cycle, which is not good, as the record is then immediately deleted and never rendered.


@ and = see other answers.

One gotcha about &
& gets expression (not only function like in examples in other answers) from parent, and sets it as function in the directive, that calls the expression. And this function has ability to replace any variable (even function name) of expression, by passing an object with the variables.

& is an expression reference, that means if you pass something like
<myDirective expr="x==y"></myDirective>
in the directive this expr will be a function, that calls the expression, like:
function expr(){return x == y}.
so in directive’s html <button ng-click="expr()"></button> will call the expression. In js of the directive just $scope.expr() will call the expression too.
The expression will be called with $scope.x and $scope.y of parent.
You have ability to override the parameters!
If you set them by call, e.g. <button ng-click="expr({x:5})"></button>
then the expression will be called with your parameter x and parant’s parameter y.
You can override both.
Now you know, why <button ng-click="functionFromParent({x:5})"></button> works.
Because it just calls the expression of parent (e.g. <myDirective functionFromParent="function1(x)"></myDirective>) and replaces possible values with your specified parameters, in this case x.
it could be:
<myDirective functionFromParent="function1(x) + 5"></myDirective>
<myDirective functionFromParent="function1(x) + z"></myDirective>
with child call:
<button ng-click="functionFromParent({x:5, z: 4})"></button>.
or even with function replacement:
<button ng-click="functionFromParent({function1: myfn, x:5, z: 4})"></button>.

it just an expression, does not matter if it is a function, or many function, or just comparison. And you can replace any variable of this expression.

following works:
parent has defined $scope.x, $scope.y
parent template: <myDirective expr="x==y"></myDirective>
directive template: <button ng-click="expr()"></button>
directive template: <button ng-click="expr({x: 5})"></button>
directive template: <button ng-click="expr({x:5, y:6})"></button>

parent has defined $scope.function1, $scope.x, $scope.y
parent template: <myDirective expr="function1(x) + y"></myDirective>
directive template: <button ng-click="expr()"></button>
directive template: <button ng-click="expr({x: 5})"></button>
directive template: <button ng-click="expr({x:5, y:6})"></button>
directive has $scope.myFn as function
directive template: <button ng-click="expr({function1: myFn, x:5, y:6})"></button>


Why do I have to use “{{title}}” with ‘@’ and “title” with ‘=’?

When you use {{title}} , only the parent scope value will be passed to directive view and evaluated. This is limited to one way, meaning that change will not be reflected in parent scope. You can use ‘=’ when you want to reflect the changes done in child directive to parent scope also. This is two way.

Can I also access the parent scope directly, without decorating my
element with an attribute?

When directive has scope attribute in it ( scope : {} ), then you no longer will be able to access parent scope directly. But still it is possible to access it via scope.$parent etc. If you remove scope from directive, it can be accessed directly.

The documentation says “Often it’s desirable to pass data from the
isolated scope via an expression and to the parent scope”, but that
seems to work fine with bidirectional binding too. Why would the
expression route be better?

It depends based on context. If you want to call an expression or function with data, you use & and if you want share data , you can use biderectional way using ‘=’

You can find the differences between multiple ways of passing data to directive at below link:

AngularJS – Isolated Scopes – @ vs = vs &