angular JS view does not update properly

Question

It's my first day of angular JS so I'm quite a newbie, I'm asking for some explanation about a behaviour that I don't understand. I'm trying to build a form that is composed of "panels". each panel contains a number of form elements (checkbox, radio group, etc.) or a message. At the beginning only the first panel is visible. Each time a user make an "action" (check something, choose something). A panel appears (sometimes more) based on the previous choice and other data.

Each form element has its model inside a controller. Each panel has a directive ngShow and a function in a controller that return whether or not this panel should be displayed. Here is a small extract from my code for two panels :

First Panel (ROOT panel always displayed)

                <div class="panel panel-default" data-ng-show="true">
                <div class="panel-heading">
                    <h3 class="panel-title">PLP</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="col-xs-offset-0 col-xs-10">
                            <div class="radio">
                                <label><input type="radio" name="group" data-ng-model="choixPlp" value="plp1"> PLP 1</label>
                            </div>
                            <div class="radio">
                                <label><input type="radio" name="group" data-ng-model="choixPlp" value="plp2"> PLP 2</label>
                            </div>
                            <div class="radio">
                                <label><input type="radio" name="group" data-ng-model="choixPlp" value="plp3"> PLP3</label>
                            </div>
                        </div>
                    </div>
                    <p> {{choixPlp}} </p>
                </div>
            </div>

Second Panel

                <div class="panel panel-default"
                data-ng-show="fmotifRetourCommentaires()">
                <div class="panel-heading">
                    <h3 class="panel-title">Dépot</h3>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <div class="col-xs-offset-0 col-xs-10">
                            <label> Motif Retour : {{motif}} </label>
                            <p>Commentaires</p>
                            <div class="textarea"></div>
                            <textarea rows="" cols=""></textarea>
                            <br />
                            <button type="submit" class="btn btn-default">Déposer</button>

                        </div>
                    </div>
                </div>
            </div>

App.js

var app = angular.module('dynamicForm', []);
app.controller('MainCtrl', function($scope) {

    $scope.choixPlp;
    $scope.motif;

    $scope.fmotifRetourCommentaires = function() {
        if ($scope.choixPlp == "plp1") {
            $scope.motif = "Degroupage Abusif";
            return true;
        }
        if ($scope.choixPlp == "plp2") {
            $scope.motif = "Deconstruction a tort";
            return true;
        }
        return false;
    };
});

My problem is that the view doesn't display the value of the variable "motif" in the second panel doesn't change when I change my choice on the first panel. It changes only if I click twice on the new choice. I did add this portion of code and it works but I don't understand why...

setInterval(function() {
    $scope.$apply()
}, 500)

Answer 1

The reason it is not working on the first click but on the second click is because the model is not getting set till you the radio button loses focus (I think the sequence of watch and refresh is not proper for some reason)

Since you want to do some action based on the value of choixPlp, you can consider setting a watch on that variable. I have modified your code a little bit and used a variable show_panel_2, and that flag gets set or unset based on the function in watch.

           <div class="panel panel-default"
        data-ng-show="show_panel_2">
        <div class="panel-heading">
            <h3 class="panel-title">Dépot</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <div class="col-xs-offset-0 col-xs-10">
                    <label> Motif Retour : {{motif}} </label>
                    <p>Commentaires</p>
                    <div class="textarea"></div>
                    <textarea rows="" cols=""></textarea>
                    <br />
                    <button type="submit" class="btn btn-default">Déposer</button>

                </div>
            </div>
        </div>
    </div>

<script>
var app = angular.module('dynamicForm', []);
app.controller('MainCtrl', function($scope) {

    $scope.choixPlp;
    $scope.motif;

    $scope.show_panel_2 = false;

    $scope.$watch('choixPlp', function() {
        if ($scope.choixPlp == "plp1") {
            $scope.motif = "Degroupage Abusif";
            $scope.show_panel_2 = true;
            return;
        }
        if ($scope.choixPlp == "plp2") {
            $scope.motif = "Deconstruction a tort";
            $scope.show_panel_2 = true;
            return;
        }

        $scope.show_panel_2 = false;
    });

});
</script>