Angular directive with scope : @ not working

Issue

Here is my directive code which works fine:

.directive('myGrid',function(){
return {
  restrict:'E',
  scope:{
    info:'=info'
  },
  templateUrl : '/directiveGrid.html'
}

})

Here is a codepen demo

But if I change the scope like :

    .directive('myGrid',function(){
    return {
      restrict:'E',
      scope:{
        info:'@info'
      },
      templateUrl : '/directiveGrid.html'
    }
  })

It doesn't work. Here is the second demo

Solution

The problem is when you have use @ for isolate scope binding, it passes the value from attribute to directive. Basically while passing value using @ it stringify that value and before passing it to directive. So value went to directive is not in a JSON format, it get stringified before reach to directive(data type changed to string).

If you do {{info}} you will see the result(which is nothing but string). It has been converted to string thats why you can't see ng-repear working

Preferred approach would be use =, that will do two things

1. Two way binding
2. It preserves data-type of value when value passes to directive.

Answered By - Pankaj Parkar