Angular UI Modal 2 Way Binding Not Working

Question

I am adding an Angular UI Modal where I am passing the scope through to the Modal Window for 2 way binding. I used the resolve method to pass the scope value. D

Answer 1

For me none of the above worked.

Instead I had to do like was suggested in this comment in github.

The variable to be binded to must be an object, not only a simple value.

For example, if $scope.value does not work, it will work if you use $scope.someObject.value.

Answer 2

Change:

<input type = "text" ng-model= "ngModel" / >

Into:

<input type = "text" ng-model= "$parent.ngModel" / >

This has to do with transclusion. Check: https://github.com/angular-ui/bootstrap/issues/969

Answer 3

I think you're under the impression that ng-model="textbox.sample" in the parent and ng-model="ngModel" in the modal are the same because you are passing textbox.sample to the modal and you're able to see the correct value in the modal window. The only reason this is working is because you're explicitly setting the $scope.ngModel property every time to modal window opens.

One way to make this work how you expect is to just use the $scope.textbox.sample property in both places, but I wouldn't recommend that.

Perhaps the proper way would be to use the modalInstance.result promise, something like this:

Create a button on the modal and make it's ng-click="ok()"

$scope.ok = function () {
    $modalInstance.close($scope.ngModal); // will return this to the modalInstance.result
}

And then in the parent controller, or whatever opens the modal window:

$scope.open = function (_ngModel) { // The ngModel is passed from open() function in template   
    var modalInstance = $modal.open({
        templateUrl: 'ModalContent.html',
        controller: ModalInstanceCtrl, 
        resolve: {
            ngModel: function () {
                return _ngModel;
            }
        } // end resolve
    });

    modalInstance.result.then(function (result) {
        $scope.textbox.sample = result;
    });
};