I'm new to Angular and I got the task to migrate an old application using Angular 1.2 to Angular 1.8, I'have been able to solve most of the issues except for this one, as you can see in the following code extract, I'm getting scope.rowTemplate = $templateCache.get(scope.row);in the first directive, then in the second directive I can use scope.rowTemplate this works fine with Angular 1.2 but whem I migrate to Angular 1.8 the value of scope.rowTemplate is no longer accesible in the second directive, I just get an undefined.

app.directive('adaptiveGrid', function ($compile, $templateCache, $timeout)
          {
            return {
              restrict: "A",
              scope: {
                name: '@',
                items: '=',
                loadingItems: '=?',
                selectRow: '=?',
                selectItem: '=?',
                functions: '=?',
                childGrid: '@',
                selectedItems: '=?',
                idField: '@?'
              },
              replace: true,
              link: function (scope, elem, attrs)
              {
                scope.name = scope.name || '';
                scope.container = scope.container || "parent";
                scope.loadingItems = scope.loadingItems || [];
                scope.functions = scope.functions || [];
                scope.childGrid = !!scope.childGrid;
                scope.selectedItems = scope.selectedItems || false;

                if (!scope.items) scope.items = [];

                scope.GetTemplate = function ()
                {
                  if (scope.row == 'first')
                    scope.rowTemplate = elem.parents('.adaptive-grid').first()
                        .find('script[type="text/ng-template"]').first().text();
                  else
                    scope.rowTemplate = $templateCache.get(scope.row);
                };

                scope.SelectItem = function (a, b, c, d)...;

                scope.SelectRow = function (item)...;

                scope.GetItems = function ()...;

                scope.IsLoading = function (item)...;
              },
              template: '<ul ng-if="rowTemplate"><li ng-repeat="item in GetItems()" ' +
                  'adaptive-grid-row="item" row-template="rowTemplate" functions="functions" ' +
                  'child-grid="{{childGrid}}" select-item="SelectItem" ng-click="SelectRow(item)"' +
                  'is-loading="IsLoading(item)" id-field="{{idField}}"></li></ul>'
            };
          })
 .directive('adaptiveGridRow', function ($compile)
          {
            return {
              restrict: "A",
              scope: {
                adaptiveGridRow: '=',
                selectItem: '=',
                functions: '=?',
                rowTemplate: '=',
                isLoading: '=?',
                idField: '@?',
                childGrid: '@?'
              },
              replace: false,
              link: function (scope, elem, attrs)
              {
                scope.Row = elem;
                scope.Item = scope.adaptiveGridRow;
                scope.childGrid = !!scope.childGrid;
               
                var templateUpdate = function ()
                {
                  scope.Row.html(scope.rowTemplate || '');
                  $compile(elem.contents())(scope);
                };

                scope.$watch("rowTemplate", templateUpdate, true);
                templateUpdate();
              }
            };
          });

Looking at the Angular migration Guide I found:

AngularJS HTML Compiler ($compile)

due to 2ee29c5d,

The isolated scope of a component directive no longer leaks into the template that contains the instance of the directive. This means that you can no longer access the isolated scope from attributes on the element where the isolated directive is defined.

Now I know this must be the issue but I really not sure how could I make this work the way it is supposed to so I would like to ask for some ideas or best practices to make it work the way it was working before.

Thank you.