Angular: Confusing and non-symmetrical callback with expression binding

http://angularjs.org/

HTML

<div ng-controller="TheController">
  
    <sample-directive the-callback="informParent">
        Nice
    </sample-directive>
    
    Received Value: {{valueReceivedFromDirective}}
    
</div>

JavaScript

var theApp = angular.module('theApp',[]);


theApp.directive('sampleDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope : {
            theCallback : '='
        },
        template: 
        '<div>' + 
            '<div ng-transclude></div>' + 
            '<hr/>' +
            '<div>Comments: <input ng-model="comments" ng-init="comments=\'Great\'"/></div>' +            
            '<div><button ng-click="theCallback(comments)">Click</button></div>' + 
        '</div>'
    };
});


theApp.controller('TheController', ['$scope', function($scope) {
    $scope.name = 'Superhero';
    
    $scope.valueReceivedFromDirective = '';
    
    $scope.informParent = function(valuePassed) {    
    
        // the parameter passed to this function is now symmetrical how the directive call this function.
        // The directive passed an object to this function, this function received an object too:
        $scope.valueReceivedFromDirective = valuePassed;
    };
    
}]);