How can I augment an isolate directive scope before a directive-controller is instantiated?

Question

I am compiling and linking a directive with an isolate scope like so (please note this is manual compiling and linking for reasons outside the scope of this question):

    outerElement = angular.element(domElement);
    $injector = outerElement.injector();
    $compile = $injector.get('$compile'); 
    getTheIsolateScopeForMyDirectiveInstance().myProperty = 'foo'; // Pseudocode. I want myProperty to be available on the scope from inside the controller constructor function.
    link = $compile(angular.element('<my-directive></my-directive>'));
    // IIUC, the following line will instantiate 
    // the controller for the directive, injecting 
    // the isolate scope. I want to augment the 
    // isolate scope that is injected *before* it 
    // is injected. 
    // The value to augment the scope resides in 
    // *this* execution context.
    // How can I do so?
    renderedElement = link(outerElement.scope());
    element.append(renderedElement);

MyDirective has an isolate scope (the one I want to augment), and a controller associated with it.

The controller MyDirectiveController leverages the injector to have its isolate scope injected.

MyDirectiveController.$inject = [ '$scope' ];

I want to augment the isolate scope before it is injected into the instance of MyDirectiveController, with a value that is only known at run-time in the execution context of the code above.

How can I do this?

MyDirective

function MyDirective() {
    return {
        scope: {}, // I want to augment this before it is injected into  MyDirectiveController
        restrict: 'E',
        template: template,
        controller: 'myDirectiveController',
        controllerAs: 'ctrl',
        replace: true,
    };
}

MyDirectiveController

function MyDirectiveController($scope) {
    console.log($scope.myProperty); // Should be 'foo'.
}

MyDirectiveController.$inject = ['$scope'];

If this is impossible, is there another way instance-specific information can be made available to the controller and/or isolate scope of the directive?

The only way I can think of right now is to augment the scope supplied to link(outerElement.scope()) above, and then define a = property on the isolate scope of the directive.

Edit:

This is what I am now doing, and the myProperty value ends up on the parent of the isolate scope for the controller:

var isolate = outerElement.scope().$new(true);
isolate.myProperty = 'foo';
renderedElement = link(isolate);
element.append(renderedElement);

Given this, when MyDirectiveController is instantiated:

function MyDirectiveController($scope) {
  $scope.myProperty; // undefined
  $scope.$parent.myProperty; // 'foo'
}

Answer 1

The assumption here

The controller MyDirectiveController leverages the injector to have its isolate scope injected.

MyDirectiveController.$inject = [ '$scope' ];

I want to augment the isolate scope before it is injected into the instance of MyDirectiveController, with a value that is only known at run-time in the execution context of the code above.

is wrong. $inject is nothing but annotation, it will make a difference only when the code is minified.

And you can't 'inject' anything into isolate scope before the directive was linked. Some ugly monkey-patching could do the trick:

  var _new = scope.$new;
  scope.$new = function () {
    return angular.extend(_new.apply(this, arguments), {
      myProperty: 'foo'
    })
  };
  $compile(angular.element('<my-directive></my-directive>'))(scope);
  scope.$new = _new;

But even if possible, it would be appropriate for writing tests but not for production code.

The only straightforward way here (and the reason why isolated scope is used) is

function MyDirective() {
    return {
        scope: {
            myProperty: '='
        },
        ...
    };
}

and

$compile(angular.element('<my-directive my-property="myProperty"></my-directive>'))(scope);

where scope.myProperty equals to 'foo'.

Answer 2

UPDATE2: If you need isolated scope, create new scope :

 var myparentscope = outerElement.scope()
 var myscope = myparentscope.$new(true) // or $rootScope.$new(true, myparentscope), see true here, it isolates scope from parent.
 myscope.prop = 'new prop' // define on child scope.
 renderedElement = link(myscope);
 element.append(renderedElement);

UPDATE: last four lines in your code:

getTheIsolateScopeForMyDirectiveInstance().myProperty = 'foo'; 
link = $compile(angular.element('<my-directive></my-directive>'));
renderedElement = link(outerElement.scope());
element.append(renderedElement);

should be :

var myscope = outerElement.scope()
scope.myProperty = 'foo'
renderedElement = link(myscope);

Original answer:

 .directive('myDirective',['$compile', function($compile) {
      return {
         link:link,
         scope: {
         }
      }

      function link(scope, element) {
         scope.prop = 'new value'  // new property on scope           
         var renderedElement = $compile('... html ...')(scope);
         element.append(renderedElement);
      }
 })

Also

$compile = $injector.get('$compile'); // I presume this instantiates the controller associated with myDirective behind the scenes?

$inject.get('$compile') is convoluted way to get $compile service. If compile service is not (and it IS NOT) dependent on your service, you can specify it as you normally do with dependency injection.

Also I think you need to read this part about compile and link steps in directive life-cycle.

Compile step is not $compile service. Compile step is executed once per life time of the app, think of it as preparation for using all the instances of your directive.

Link steps (pre and post link) are taking your prepared directive and actually instantiating it for specific place/scope etc in your app.

Since you need to update scope - it is link step that you want to use.

Good video on the topic - https://egghead.io/lessons/angularjs-compile-pre-and-post-link