Get return value in callback Angular js Directive

Question

I have created one directive in Angularjs in which I need to use callBackMethod, so that I can call Controller's Function.

Controller's function is called.But Controller's Function is returning some value.I want to get that value in callback function.How to achieve that?

Below is my code for Directive

.directive('abcOption', function($compile) {
return {
    restrict : 'A',
    template : '<div class="filter-content"></div>',
    replace : true,
    scope : {
            callBackMethod:'&getDisplayName'
    },link: function(scope,element,attrs)
    {
        scope.getDataName =function(dataId)
        {
            scope.callBackMethod(dataId);
        };
}
    };
});

Below Code is for Controller function

$scope.getDisplayName = function(columnName) {
return 'abc';
};

It's small snippet of the code. Controller function is called but I am not getting return value in directive function. I am getting undefined in console log if I log scope.callBackMethod(dataId);

How to get return value using callBackMethod in Directive?

Answer 1

While calling the controller's function from inside a directive with an isolate scope, you need to pass an object:

HTML

<div ng-app="myApp" ng-controller="ctrl">
    <div abc-option get-display-name="getDisplayName(columnName)"></div>
</div>

JS

var app = angular.module('myApp', []);
function ctrl($scope){
    $scope.getDisplayName = function(columnName) {        
        return 'abc';
    };
}
app.directive('abcOption', function($compile,$timeout) {
    return {
        restrict : 'A',
        template : '<div class="filter-content">abc</div>',
        replace : true,
        scope : {
            callBackMethod:'&getDisplayName'
        },
        link: function(scope,element,attrs){            
            /* send an object to the function */
            console.log(scope.callBackMethod({columnName:"hurray"}));           
        }
    };
});

Fiddle

Answer 2

The answer from CodeHater works but is (just a little) confusing. So I updated it to make it easier to understand

HTML

<div ng-app="myApp" ng-controller="ctrl">
    {{returnVal}}
    <div abc-option callback="setDisplayNameFn(mustBeTheSame)"></div>
</div>

JS

var app = angular.module('myApp', []);
function ctrl($scope){
    $scope.setDisplayNameFn = function(whatever) {        
        $scope.returnVal=  whatever;
    };
}
app.directive('abcOption', function($compile,$timeout) {
    return {
        restrict : 'A',
        template : '<div class="filter-content"><b>directive html<b></div>',
        replace : true,
        scope : {
            callBackMethod:'&callback'
        },
        link: function(scope,element,attrs){            
            /* send an object to the function */
            console.log(scope.callBackMethod({mustBeTheSame:"value from directive"}));           
        }
    };
});

updated fiddle