How to set scope parameters with isolated scope

Question

I thought I'd mastered isolated scopes with custom directives, then hit this problem, which I've been struggling with for 3 hours now:

Once the isolated scope is created for the directive I thought you could set any scope data (in this case greeting) within the controller or link function. But referencing {{greeting}} in the HTML doesn't work, even though greeting it is shown in the scope when inspected via the console?

I thought the new isolated scope would be assigned to the directive myDir and than anything defined on that scope would be accessible within the HTML contents of <my-dir>. Obviously, I have a gap in understanding.

Any ideas please?

Plunker: here

HTML:

<my-dir>
    Greeting: {{greeting}}
</my-dir>

JS:

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

app.directive('myDir', function() {

    return {
        restrict: 'EA',
        scope: {},
        controller: ['$scope', function ($scope) {

            $scope.greeting = 'Hello';
            //this.greeting = 'Hello';

        }],
        link: function(scope, element, attrs){

          //scope.greeting = 'Hello';

        }

    };
})

Answer 1

replace scope: {} with

scope: false,

that's not possible the current dom belongs to parent so it will consider only parent scope directice's isolated scope will not work.

Answer 2

Seems like this works. Anyone see any downsides?

So within the link function, pass the transclude parameter, then set the scope for the transcluded element, thus:

app.directive('myDir', function() {
    return {
        restrict: 'EA',
        scope: {},
        controller: ['$scope', function ($scope) {

            $scope.greeting = 'Hello';

        }],
        link: function(scope, element, attrs, ctrl, transclude){

            transclude(scope, function(clone) {
                element.append(clone);
            });

        },
        transclude: true
    };
})

Answer 3

Refer to the docs here - Creating a Directive that Wraps Other Elements:
That example is what you might be after.

For you case too, you can simply use ng-transclude, move the Greeting {{greeting}} to a template which you define in my-dir directive definitions.

Directive definition in JS

        app.directive('myDir', function() {

            return {
                restrict: 'EA',
                scope: {},
                controller: function ($scope) {
                    $scope.greeting = 'Hello';
                },
                template: 'Greeting: {{greeting}}',
                link: function(scope, element, attrs){

                  //scope.greeting = 'Hello';

                }

            };
        })

HTML

<my-dir></my-dir>

you just don't have to touch the link function or do anything out of the box.

Working plunkr: https://plnkr.co/edit/08tFyy?p=preview