(sorry if this is duplicate, but what i've found does **not** answer my question: 
[Databinding is not working with kendo grid in angular JS directives](https://stackoverflow.com/questions/33691098/databinding-is-not-working-with-kendo-grid-in-angular-js-directives)
)

I am trying to create a ***directive with a templateUrl containing a kendo grid, and use this directive in a controller***. 

I can manage to bind some of the directive's attributes (e.g. my-grid-options, which is initialized in the controller) but *not* ***my-grid-id***. 

What am I missing? (full plunk [here](http://plnkr.co/edit/kGPlfzoQfm2wFkOcSMSN?p=preview))

**the directive:**

```
Directives.myGrid = function() {
    return {
        scope: {
            myGridId: "=",
            myGridOptions: "="
        },
        restrict: "E",
        transclude: true,
        templateUrl: 'myGrid.html',
        link: function(scope) {
            //... some code using the myGridId
            scope.myGridId.....
        }
    }
}

```

**myGrid.html:** 

```
<div kendo-grid="myGridId" k-options="myGridOptions" id="myGridId">      
</div>

```

**how I want to use it:**

```
<body ng-app='app' ng-controller='myCtrl'>
     <my-grid my-grid-id="mainGrid" my-grid-options="mainGridOptions"></my-grid>    
</body>

```

**controller:**

```
angular.module('app').controller('myCtrl',function($scope){
    $scope.ds = [
          {Category:"Toys", Name: "Doll", Code: "p1", Special: false},  
          ....            
          {Category:"Stationary", Name: "Crayons", Code: "p4", Special: false}
        ];

    $scope.mainGridOptions = {            
        columns: [
            {
                field: "Category",
                title: "Category"
            },
            {
                field: "Name",
                title: "Name"
            },
            {
                field: "Code",
                title: "Code"
            }, 
            {
                field: "Special",
                title: "Special Offer"
            }, 
        ],
        dataSource: $scope.ds,
        sortable: true,
        selectable: true,
        resizable: true,
        pageable: true,
        reorderable: true,
        columnReorder: function (e) {
          //do something trivial... for example sake, but a more complex event is used
          $.each($scope.mainGrid.wrapper.find('tbody tr'), function () {
              var model = $scope.mainGrid.dataItem(this);
              if (model.Special === true) {
                  $(this).addClass('special-row');
              }
          });
        }
    };
  });

```

Thanks for any advice.