directives inside ui.bootstrap $modal don't correctly bind to the controller

[stukennedy]

using the scope definition in directives allows you to sync with controller variables from the parent controller ... like this

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

app.controller('MainCtrl', function($scope, $modal) {
    $scope.name = "Stu";
    $scope.$watch('name', function () {
        $scope.computed = $scope.name;
    });
});

app.directive('myDirective', function($compile) {
    return {
        restrict: 'E',
        scope: {
            myDirectiveVar: '=',
        },
        template: '<div class="some">' +
        '<input ng-model="myDirectiveVar"></div>'
    };
});

So when you change the text field in the directive it updates the controller value $scope.name which triggers the $watch, which in turn sets $scope.computed to the same value.

This does not work if your controller is a ui.bootstrap $modal Controller. It updates the $scope.name correctly in the Modal dialog view, but the Controller value for $scope.name is unchanged and doesn't trigger the $watch. e.g.

var app = angular.module('app', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $modal) {
    var opts = {
        templateUrl: 'modal.html',
        controller: 'ModalCtrl'
    }

    $scope.openModal = function () {
        var d = $modal.open(opts);
    };
});

app.controller('ModalCtrl', function($scope) {
    $scope.name = "Stu";
    $scope.$watch('name', function () {
        $scope.computed = $scope.name;
    }); 
});

app.directive('myDirective', function($compile) {
    return {
        restrict: 'E',
        scope: {
            myDirectiveVar: '=',
        },
        template: '<div class="some">' +
        '<input ng-model="myDirectiveVar"></div>'
    };
});

Please see this Plunker which demonstrates this behaviour.

Is this a bug in ui.bootstrap or in Angular?

EDIT: this also happens when the scope of the directive isn't isolated.

[pkozlowski-opensource]

@continuata this is due to the fact that there is a transclusion scope between your controller and a template. You can find more info and work-arrounds in angular-ui/bootstrap#969

Ultimately the solution will come from #5489

Next time you've got issues with the angular-ui/bootstrap please open the issue in there first.

[stukennedy]

thanks for the clarification