Cannot receive value of isolated scope in directive - angularjs

Question

I created this directive
angular.module('panel')
.directive('sigPanel', sigPanel)
function sigPanel() {
return {
restrict: 'E',
scope:{
imgData:"="
},
templateUrl: 'app/widgets/signature/signature.html',
link: function (scope, element, attrs) {
console.log(scope.imgData);
}
}
}
This is the templateURL:
<canvas style="border:1px solid black;"></canvas>
And added this into the HTML:
<sig-panel imgData="test"></sig-panel>
The console log only outputs "undefined", shouldn't it log "test"? I know the directive html tag is working properly because the canvas appears on the page, but why won't the directive pick up the value of "imgData"?
If I try setting the scope.imgData inside the directive I get the error
[$compile:nonassign] Expression 'undefined' used with directive 'signaturePanel' is non-assignable!
Not sure why this is happening.

Answer 1

You need to change imgData (camelCase normalized) to img-data (dash-delimited). Also if you want to pass the string "test" to the scope you need to put quotes around it.
angular.module('app', []).directive('sigPanel', sigPanel);
function sigPanel() {
return {
restrict: 'E',
scope: {
imgData: "="
},
template: '<canvas style="border:1px solid black;"></canvas>',
link: function(scope, element, attrs) {
console.log(scope.imgData);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app'>
<sig-panel img-data="'test'"></sig-panel>
</div>
assignable example:
angular.module('app', [])
.controller('myController', function($scope) {
$scope.test = 'test';
})
.directive('sigPanel', sigPanel);
function sigPanel() {
return {
restrict: 'E',
scope: {
imgData: "="
},
template: '<canvas style="border:1px solid black;"></canvas>',
link: function(scope, element, attrs) {
console.log(scope.imgData);
scope.imgData = 'bob';
console.log(scope.imgData);
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
<sig-panel img-data="test"></sig-panel>
{{ test }}
</div>