Two way binding not working with a variable in a Modal (Subcontroller) with angularjs

Hello I got a list of products and I want people to select one of them and then a modal displays where they can enter extra info (a comment). I am using ‘AngularJS’ with ‘Angular-UI’ and ‘Angular-UI-bootstrap’. I thought I would be able how to get it working with the example given at http://angular-ui.github.io/bootstrap/#/modal However I can t seem to save the Comment. It always stays “Please enter a comment”. Here is the code:

The modal template:

  • How to make Automated Dynamic Breadcrumbs with AngularJS + Angular UI Router
  • angularUI ui-select2 directive not working
  • After making selection from an ui-select box, chosen option is not sticking (not visible) as selected
  • Can't select item in list created by ui-select2
  • angular ui modal after close event
  • AngularJS - Accept a ui.bootstrap modal with ENTER key
  •    <script type="text/ng-template" id="orderModal">
            <div class="modal-header">
                <h3>Title</h3>
            </div>
            <div class="modal-body">
                <div class="alignleft">{{Product.Naam}}</div>
                <div class="alignright">€{{Product.Prijs}}</div>
                <div style="clear: both;"></div>
                <p>Heeft u een nog opmerking bij dit product?</p>
                <input type="text" name="Comment" ng-model="Comment" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="ok()">Toevoegen</button>
                <button class="btn btn-warning" ng-click="cancel()">Annuleren</button>
            </div>
        </script>
    

    Here is are the controllers:

    productModule.controller("ProductsController", function ($scope, bootstrappedData, $modal, $log) {
        $scope.products = bootstrappedData.products;
    
        ...
        $scope.AddNormalOrder = function (product) {
                ....
        };
    
        $scope.OpenModal = function (product)
        {
            var modalInstance = $modal.open({
                templateUrl: 'orderModal',
                controller: ModalInstanceCtrl,
                resolve: {
                    product: function () {
                        return product;
                    }
                }
             });
            modalInstance.result.then(function (order) {
                $scope.AddNormalOrder(order);
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };
    });
    var ModalInstanceCtrl = function ($scope, $modalInstance, product) {
        $scope.Product = product;
        $scope.Comment = "Please enter a comment"; // it never changes
        $scope.ok = function () {
            var order = $scope.Product;
            order.Comment = $scope.Comment; // Here even if I check the value in debug after                     //changing it it still stays the same value ("Please enter a comment")
            $modalInstance.close(order);
        };
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    };
    

    TL;DR
    The $scope.Comment in the ModalInstanceCtrl never changes if change the value in .

  • Highlight search result using angular.js and ui.utils
  • Using ng-blur and ui-sref doesn't work as expected
  • AngularJS ui modal passing data
  • Angular UI select2 array with objects is it possible?
  • How to set default child view with Angular UI Router
  • AngularJS: $decorator binding new variables to directive
  • 2 Solutions collect form web for “Two way binding not working with a variable in a Modal (Subcontroller) with angularjs”

    Seems like a scoping issue.
    Try this:

    var ModalInstanceCtrl = function ($scope, $modalInstance, product, $log) {
        $scope.Product = product;
        $scope.Product.Comment = "Please enter a comment";
        $scope.ok = function () {
            var order = $scope.Product;
            $log.info(order.Comment);  //You should see the updated Comment in your console
            $modalInstance.close(order);
        };
        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    };
    

    Change your input to this:

    <input type="text" name="Comment" ng-model="Product.Comment" />
    

    Seems this is an issue with the bootstrap modal code.

    See this for a different fix
    https://stackoverflow.com/a/23518971/433390

    which is, use $parent.Comment in the template with the code that was posted in the question

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

    this for an explanation
    https://github.com/angular-ui/bootstrap/issues/969