Search code examples
angularjsangular-ngmodel

Not getting the updated value of ng-model when ng-model is changed programmatically


When I check master check-box all the children check-box should be checked and their content should also be shown when check-box is checked otherwise their content should not be shown but the issue is that child check-boxes are checked but their content is not shown when I check master check-box if I check child check-box manually its content is shown.

<!DOCTYPE html>
    <html>
        <head>
            <title>Angular Demo</title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        </head>
        <body data-ng-app="">
            <table>
                <tr>
                    <td>
                        <input type="checkbox" data-ng-model="parent"/>
                    </td>
                    <td data-ng-show="parent" class="left">
                        It's master
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" data-ng-model="child_1" data-ng-checked="parent"/>
                    </td>
                    <td data-ng-show="child_1">
                        It's child 1
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" data-ng-model="child_2" data-ng-checked="parent"/>
                    </td>
                    <td data-ng-show="child_2">
                        It's child 2
                    </td>
                </tr>
            </table>
        </body>
    </html>

Solution

  • I have solved the issue.

    <input type="checkbox" data-ng-model="parent" data-ng-change="child_1= parent;
                                child_2=parent;" />
    

    Please click here to see the code.