AngularJS two way data binding in directive not working

Question

I have a directive that updates a bound property, but it never seems to update the original property!

directives.directive('recordVideo', [function () {
    return {
        scope: {
            showRecordVideo: '='
        },
        controller: "recordVideoController as ctrl",
        templateUrl: '/views/recordvideo.html'
    };
}]);

<record-video data-show-record-video="showAddScheduleDialog"></record-video>

When I set $scope.showAddScheduleDialog = true in the parent controller, the directive sees the change and shows the dialog. When the dialog itself sets its property $scope.showRecordVideo = false the bound property on the parent controller showAddScheduleDialog never updates!

Why is this?

I have tried putting $scope.$watch on both the parent controller and the directive. The changes only propogate down to the directive and never back up to the controller!

Answer 1

The problem is caused by javascript prototype inheritance (the long answer). The usual hack is to change a property inside:

This stays the same:

scope: {
    showRecordVideo: '='
},

In controller:

$scope.showRecordVideo = {
    state: true
};

In modal:

$scope.showRecordVideo.state = false;