<div ng-controller="cntrl">
    <div>Prefix: {{prefix}}</div>
    <div >Concatenated value: {{concatenatedName}}</div>
    <!--Below is the directive-->
    <div entering="{{prefix}}" joinit></div>
</div>

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

myMod.controller('cntrl', function ($scope) {
    $scope.prefix="JOE";
    $scope.concatenatedName="";
    $scope.concatenate = function (param) {
        $scope.concatenatedName=param;
    };
});

myMod.directive('joinit', function () {
return {
    restrict: 'A',
    template: "<div>Suffix: <input type='text' id='suffix'/>" +
    "<button ng-click='click()'>Concatenate</button> </div>",
    controller: function($scope, $element){
      $scope.click = function(){
        var concatVar = $element[0].attributes[0].value +
                    document.getElementById('suffix').value;
        $scope.concatenate(concatVar);
      }
    }
};
});

myMod.directive('joinit', function () {
return {
restrict: 'A',
scope:{suffix:'='},
template: "<div>Suffix: <input type='text' ng-model='suffix_value'/>" +
"<button ng-click='click()'>Concatenate</button> </div>",
controller: function($scope, $element){
  $scope.click = function(){
    $scope.suffix = angular.copy($scope.suffix_value);
  }
}
};
});

<div suffix="someSuffix" joinit></div>

$scope.concatenate = function (whatever) {
  return $scope.prefix + whatever;
}

{{concatenate(someSuffix)}}