Add directive to elements produced by ng-grid

问题:

Using ng-grid, I developed a simple application to render an excel sheet in UI. I want the fields(table headers) to be draggable, so that I can drop them at run time into some bins, somewhat like - this. The only difference being, here I will be dragging the excel column header.

I can't figure out how to add directive "draggable" to something generated by ng-grid.

P.S. Every column header has to have its own "draggable", so that I may uniquely identify the column number/name

Angular code goes like :

var sth = {"excelData" : [{"Name":"Rohan","Id":"1001.0","Salary":"50000.0","Age":"25.0"},{"Name":"Rohit","Id":"1002.0","Salary":"60000.0","Age":"24.0"},{"Name":"Rahul","Id":"1003.0","Salary":"55000.0","Age":"29.0"},{"Name":"okay bye","Id":"1004.0","Salary":"88214.0","Age":"32.0"}]};
        $scope.myData = sth.excelData;
        $scope.gridOptions = { data: 'myData' };

In my HTML, I use:

<div class="gridStyle" ng-grid="gridOptions">
</div>

Here, Name, Id, Salary, Age, all should be independently and individually draggable.

P.S. Given static json only for understanding. It gets generated at run time and may be very huge.