在ng-repeat内部呈现的指令中更新Controller $ scope属性

Question

I have created a fiddle (it was my first, so was quite a headache to get going!): http://jsfiddle.net/rmN59/17/ .

<div ng-controller="MainCtrl">

<div ng-repeat='d in data'>
    <div id="container-{{ d.key }}">
        <h3>My text {{ d.key }}</h3>
    </div>

    <div class='myDirective' overlay-contents='$parent.overlayContents' name='container-{{ d.key }}'></div>
</div>
<div id="overlay" class="hidden" ng-click="hideOverlay($event)">
    <div ng-bind-html='overlayContents'></div>
</div>

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

myApp.controller('MainCtrl', ['$scope', function ($scope) {
    var overlaySelector = '#overlay';
    var showOverlay = function(){
        $(overlaySelector).toggleClass('hidden');
    };

    $scope.data = [{ key: '1' }, { key: '2' }];

    $scope.overlayContents = 'alex';

    $scope.$watch('overlayContents', function(newVal, oldVal){
        if(newVal !== oldVal){
            showOverlay();
        }
    });

    $scope.hideOverlay = function(e){
        var target = $(e.target);

        if(target.is(overlaySelector)){
            target.toggleClass('hidden');
        };

        e.stopPropagation();
    };
}]);


myApp.directive('myDirective', ['$sce', function($sce){
    return {
        scope: {
            overlayContents: '=',
            container: '@name'
        },
        template: '<button>Click</button>',
        restrict: 'C',
        link: function(scope, element){
            var stripAngularProps = function(html){
                return html.replace(/ng-(scope|binding|bind-html="[\w\(\)\.\[\]]+")/g,'');
            };

            element.click(function(e){
                var container = $('#' + scope.container);

                if($(e.target).is(element.find('button'))){
                    var html = stripAngularProps(container.html());

                    scope.$apply(function(){
                        scope.overlayContents = $sce.trustAsHtml(html);
                    });
                }
            });
        }
    }
}]);

I have data I need to iterate over and create a directive for each iteration. I then have an overlay directive outside of the loop that will listen for changes to a model on the controller (overlayContents). At which point, the controller will display the overlay with the updated contents.

The $scope.$watch in the controller never fires.

UPDATE: It works in the fiddle! Annoyingly. The only difference I can see is that here I'm using dummy data and in my real project I'm using separate files for the templates. I've been pulling what hair I have left out for hours!

UPDATE 2: The overlayContents property DOES get updated, and it is reflected in the DOM, but the $watch is not called.

Answer 1

I have fixed it myself. Sorry for not being able to put more specific code.

By removing the DOM manipulation in the controller and moving it into an overlay directive which watches for changes to the overlayContents this seems to work. Perhaps because the $watch is added in the link function which is after the compile stage. I'm still getting my head round how Angular works.