Directive function not running - angularjs

Question

I have this directive:
angular.module('colab.dropdown', []).directive('colabDropdown', function(){
return {
restrict: 'A',
transclude: true,
scope: {
ddlist: '=listtoshow',
model: '=modeltosave',
displayField: '=listfieldtoshow',
fieldtoSave: '=listfieldtosave'
},
link: function(scope, element, attrs) {
var ddlist = scope.ddlist,
model = scope.model,
displayField = scope.displayField,
fieldtoSave = scope.fieldtoSave,
rowIdx = scope.rowIndex;
rowIdx = null;
for(var i=0;i < ddlist.length;i++){
if(ddlist[i][attrs.listfieldtosave] == model){
rowIdx = i;
}
}
if(rowIdx !== null){
scope.displayField = ddlist[rowIdx][attrs.listfieldtoshow];
}
console.log(scope.displayField);
scope.selectItem = function(unit) {
console.log(unit);
// var idx = scope[attrs.listtoshow].indexOf(unit);
// scope[attrs.modeltosave] = unit[attrs.listfieldtosave];
// scope.listfieldtoshow = unit[attrs.listfieldtoshow];
};
}
}
});
here is my template:
<div class="radio">
<label>
<input type="radio"
name="chickenEgg"
ng-value="mm.id"
ng-model="formData.chickenEgg"
ng-change="selectItem(mm)"
>
{{mm.name}} - {{mm.year}}
</label>
</div>
I am not able to do the following:
run function selectedItem() in my template when I click the radio.
display the {{displayField}} in the DOM. I can display it in the console (line 38 of the directive) but not in the DOM. see the plunker console**
I can run the selectItem() if I don't have the scope:{...} in the directive.
http://plnkr.co/edit/wuLmJs5f6hVhPEP7OqKS?p=preview
Thank you.

Answer 1

You need to add you add your selectItem() function to angular-hovercard.js file.
$scope.selectItem = function(item) {
console.log(item);
}
Check it Out