After encountering the same issue, I drew inspiration from various responses in this discussion to devise a unique solution:

.directive('tpReport', ['$parse', '$http', '$compile', '$templateCache', function($parse, $http, $compile, $templateCache)
    {
        var getTemplateUrl = function(type)
        {
            var templateUrl = '';

            switch (type)
            {
                case 1: // Table
                    templateUrl = 'modules/tpReport/directives/table-report.tpl.html';
                    break;
                case 0:
                    templateUrl = 'modules/tpReport/directives/default.tpl.html';
                    break;
                default:
                    templateUrl = '';
                    console.log("Type not defined for tpReport");
                    break;
            }

            return templateUrl;
        };

        var linker = function (scope, element, attrs)
        {

            scope.$watch('data', function(){
                var templateUrl = getTemplateUrl(scope.data[0].typeID);
                var data = $templateCache.get(templateUrl);
                element.html(data);
                $compile(element.contents())(scope);

            });



        };

        return {
            controller: 'tpReportCtrl',
            template: '<div>{{data}}</div>',
            // Remove all existing content of the directive.
            transclude: true,
            restrict: "E",
            scope: {
                data: '='
            },
            link: linker
        };
    }])
    ;

Integrate the following code snippet into your HTML file:

<tp-report data='data'></tp-report>

This custom directive serves the purpose of dynamically incorporating report templates based on the dataset obtained from the server.

By monitoring changes in the scope.data attribute, the directive swiftly loads the appropriate template whenever new data is requested by the user.

To ensure Angular recognizes that your directive utilizes a scope variable, you must declare it accordingly:

It is essential to connect a specific property of the scope to your directive:

return {
    restrict: 'E',
    scope: {
      customVariable: '='
    },
   ...
}

Subsequently, utilize $watch to monitor changes:

  $scope.$watch('customVariable', function(value) {
    // Implement actions based on the updated value
  });

For additional details, consult the Angular documentation on directives.

I've come across a much more efficient solution:

app.directive('layout', function(){
    var settings = {
        restrict: 'E',
        transclude: true,
        templateUrl: function(element, attributes){
            var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
            return constants.pathLayouts + layoutName + '.html';
        }
    }
    return settings;
});

The only downside I currently observe is that transcluded templates have their own scope. They receive values from their parents, but instead of changing the value in the parent, the value is stored in a new child scope. To overcome this, I now use $parent.whatever instead of just whatever.

For example:

<layout name="Default">
    <layout name="AnotherNestedLayout">
        <label>Whatever:</label>
        <input type="text" ng-model="$parent.whatever">
    </layout>
</layout>

It's important to monitor your scope regularly.

Follow these steps:

<layout layoutId="myScope"></layout>

Your directive should be structured like this:

app.directive('layout', function($http, $compile){
    return {
        restrict: 'E',
        scope: {
            layoutId: "=layoutId"
        },
        link: function(scope, element, attributes) {
            var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
            $http.get(scope.constants.pathLayouts + layoutName + '.html')
                .success(function(layout){
                    var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g;
                    var result = regexp.exec(layout);

                    var templateWithLayout = result[1] + element.html() + result[2];
                    element.html($compile(templateWithLayout)(scope));
        });
    }
}

$scope.$watch('myScope',function(){
        //Take necessary actions
    },true)

You can also include models in your directive to ensure automatic updates trigger the watch method for your directive.

Although this may be an old topic, I wanted to share my solution in case anyone comes across it like I did:

After some trial and error, I came up with the following code for updating values in my directive when the "parent scope" changes. I'm still learning Angular, so please feel free to correct me if I'm mistaken, but this approach worked for me;

Here is the directive code:

directive('dateRangePrint', function(){
    return {
        restrict: 'E',
        scope:{
            From: '@rangeFrom',
            To: '@rangeTo',
            format: '@format'
        },
        controller: function($scope, $element){

            $scope.viewFrom = function(){
                    return formatDate($scope.From, $scope.format);
                }

            $scope.viewTo = function(){
                    return formatDate($scope.To, $scope.format);
                }

            function formatDate(date, format){
                format = format || 'DD-MM-YYYY';

                //perform operations on date...

                return date.format(format);
            }

        },
        replace: true,
        template: '<span>{{ viewFrom() }} - {{ viewTo() }}</span>'
    }
})

Let's give this a shot

$rootScope.$digest(function() {
    $scope.stage = "completed";
    //scope.array3.length = 0;
});

http://jsfiddle.net/9iKAy/

One interesting solution that hasn't been mentioned yet is bindToController, which can help eliminate messy scopes and $watches. This is particularly useful if you are working with Angular 1.4

Take a look at this example DOM structure:

<div ng-app="app">
    <div ng-controller="MainCtrl as vm">
        {{ vm.name }}
        <foo-directive name="vm.name"></foo-directive>
        <button ng-click="vm.changeScopeValue()">
        changeScopeValue
        </button>
    </div>
</div>

Here's the corresponding controller code snippet:

angular.module('app', []);

// main.js
function MainCtrl() {
    this.name = 'Vinoth Initial';
    this.changeScopeValue = function(){
        this.name = "Vinoth has Changed"
    }
}

angular
    .module('app')
    .controller('MainCtrl', MainCtrl);

// foo.js
function FooDirCtrl() {
}

function fooDirective() {
    return {
        restrict: 'E',
        scope: {
            name: '='
        },
        controller: 'FooDirCtrl',
        controllerAs: 'vm',
        template:'<div><input ng-model="name"></div>',
        bindToController: true
    };
}

angular
    .module('app')
    .directive('fooDirective', fooDirective)
    .controller('FooDirCtrl', FooDirCtrl);

Feel free to experiment with this concept using the provided Fiddle link. By changing the scope value in the controller, you'll notice how the

directive updates automatically on scope change

. http://jsfiddle.net/spechackers/1ywL3fnq/

An effective approach is to define the scope variable as an object. This allows for accessing the content using

{{ whatever-object.whatever-property }}

. The reason why the variable is not updating is due to JavaScript passing Primitive types by value, while Objects are passed by reference, which ultimately resolves the issue.