angular custom directive two way binding not working inside uib modal

Question

I'm having difficulties with a custom directive two way binding inside uib-modal. The directive gets the model variable from the uib-modal scope, but on change, the model in the uib-modal isn't applying.

I console.log the scopes and got the directive to access the uib-modal scope only using $scope.$parent.$parent... for some reason the two way binding isn't working.

For now I execute eval() using the directive model attribute:

link: function (scope, element, attrs, ctrls) {
    scope.uibScopeModel = attrs.ngModel;
}

eval('$scope.$parent.$parent.' + $scope.uibScopeModel + ' = $scope.model');

it's working but it doesn't seem like a good solution for the problem..

Why is the two way binding not working properly? Is it a known issue with uib-modal? and how can it be solved?

My custom directive:

angular.module('mean.upload').directive('uploadDirective', function (Upload) {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: {
            model: '=ngModel', // the model
            type: '@type',    // type of upload (imageSingle/fileSingle)
            required: '@required', //
            fileTypeAccept: '@fileTypeAccept',
        },
        templateUrl: function (elem, attr) {
            switch (attr.type) {
                case 'imageSingle':
                    return '/upload/views/directive_templates/image-single.tpl.html';
                case 'fileSingle':
                    return '/upload/views/directive_templates/file-single.tpl.html';
            }
        },
        link: function (scope, element, attrs, ctrls) {
            scope.uibScopeModel = attrs.ngModel;
        },
        controller: function ($scope, $rootScope) {
            $scope.uploader = Upload.getDefaultUploader();
            $scope.uploader.onCompleteItem = function (item, response, status, headers) {
                if ($scope.type === 'imageSingle') {
                    $scope.model = Upload.uploadPath + response.filename;
                } else if ($scope.type === 'fileSingle') {
                    $scope.model = {
                        src: Upload.uploadPath + response.filename,
                        name: item.file.name,
                        type: item.file.type
                    };
                }
                eval('$scope.$parent.$parent.' + $scope.uibScopeModel + ' = $scope.model');
            }
        }
    }
});

markup:

<upload-directive
        ng-model="file"
        type="fileSingle"
        file-type-accept="application/pdf">
</upload-directive>

directive template:

<div nv-file-drop uploader="uploader">
    <div class="well drop-zone" nv-file-over uploader="uploader">
        <div class="row" ng-show="model">
            <div class="uploaded-file-teaser col-sm-6 col-sm-offset-3 validation-icon-container">
                <div class="teaser-edit-buttons">
                    <button class="btn btn-xs" ng-click="model=null">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>
                <div class="file-container type-{{model.name | extension}}">
                    <p><i class="fa"></i></p>
                    <a href="{{model.src}}" target="_blank" title="{{model.name}}">
                        {{model.name | filename }}.{{model.name | extension}}
                    </a>
                </div>
            </div>
        </div>
        <p ng-show="!model">Drop file here</p>
        <div nv-file-drop uploader="uploader" class="input-file-container">
            <button class="btn btn-success btn-large">
                <i class="fa fa-upload"></i> {{ buttonText || 'Upload File' }}
            </button>
            <input class="browse-image-btn" type="file" nv-file-select
                   input-validation-upload ng-model="model"
                   uploader="uploader" accept="{{fileTypeAccept}}"
                   required="required"/>
        </div>
    </div>
</div>

Answer 1

I experienced the same behaviour when writing my own directive. My solution was not to use directive's scope at all and update the scope with function.

directive:

app.directive('sfTableHeader', function() {
  return {
    restrict: 'A',
    scope: false,
    template: '<div><a ng-click="updateScope(1234567)">click me</a></div>'
  }
});

controller:

$scope.updateScope = function(someNumber) {
  $scope.number = someNumber;
};