Checkbox is not updating model in ngstrap modal dialog

Question

In directive, we have set $scope.checkValue = true, and the same scope is passed to ngstrap modal dialog.

below is the code from directive link function which is called on button click and popup the dialog:

return {
        templateUrl: "../Views/userSubscriptionView.html",
        restrict: 'E',
        scope: {},
        link: function ($scope, element, attributes) {
$scope.checkValue = false; //this is bind to checkbox model but not updating on check/uncheck.
    function DoOpenDialog()
    {
       //other code
        var myOtherModal = $modal({ scope: $scope, templateUrl: "../Views/SubscribePopup.html", show: false , persist:false});
                                myOtherModal.$promise.then(myOtherModal.show);
    }

Below is the code from dialog:

<input type="checkbox" ng-model="checkValue"/>
{{checkValue}}

The problem is: when I check the checkbox to true or false, model 'checkValue' is not updating. I need to change the state of other control based on the checkbox check state.

Thanks

without more code, it's impossible to know for sure what your issue is, but it is likely that you are having issues due to [JavaScript Prototype Inheritance](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs). In general, you should **always use a dot in angular bindings**. — Claies, Apr 01 '17 at 02:14

score 0 · Answer 1 · answered Apr 01 '17 at 10:40

I use to solve this by explicitly setting the ng-true-value and ng-false-value properties :

<input type="checkbox" 
  ng-true-value="'true'" 
  ng-false-value="'false'" 
  ng-model="checkValue"
/>

Notice the single quotes around 'true'. Ultimately everything is passed as strings, not as booleans or integers. I use the same approach when I have to deal with a boolean (tinyint) 0 / 1 value from mysql: ng-true-value="'1'" and so on.

Checkbox is not updating model in ngstrap modal dialog

1 Answers1