AngularJS: create a custom attribute for a directive

Controller

var tableController = function($scope, $rootScope,UtilService,$element,$attrs) {

    this.defineListeners = function() {
        this.$scope.$on('$destroy', this.destroy.bind(this));
        var _this=this;
        this.$scope.$watch($attrs.gridCollection,function(value){_this.updatedCollection(value);});
    };
    this.defineScope = function() {
       var canvas = $element[0].childNodes[0];
       $scope.collection = {};
       $scope.collection = [{value:100}];
      // console.log($scope.gridCollection);
    };
 
     this.updatedCollection=function(value)
    {
        console.log("updatedCollection",$scope.collection,value,$attrs.gridCollection);
    };

   //initialise the controller
    this.init($scope);
};
tableController.prototype = new BaseController();
tableController.constructor = tableController;

Directive

var canvastable = function()
{
     return {
      restrict: 'E',
      template:"<canvas></canvas>",
      controller:'tableController',
      scope:{
          gridCollection:"=gridCollection"
      }
    };
};

HTML

<canvastable data-grid-collection="collection"></canvastable>