Angular scope doesn't get updated on view

Question

I've an angular ng-click event here:

eventApp.controller('DetailEventController', ['$scope', '$http', '$compile', '$timeout', function ($scope, $http, $compile, $timeout, uiCalendarConfig) {
$scope.customRule = { isReadOnly: true, isRegistered: false };
$scope.EventClick = function (event, jsEvent, view) {
                
                var isRegistered;
                console.log(event.character);
                angular.forEach(event.character, function (pvalue, pkey) {
                    for (var item in pvalue.teilnehmer) {
                        if (pvalue.teilnehmer[item] == CurrenUserName) {
                            console.log("User ist bereits angemeldet!");
                            isRegistered = true;
                        } else {
                            console.log("User ist noch nicht angemeldet!");
                            isRegistered = false;
                        }
                    }
                });
                $scope.customRule.isRegistered = isRegistered;

                console.log($scope.customRule);
                $scope.eventDetails = event;
                $("#detailEvent").css("display", "block");
            };
}]);

When I open the console the $scope.customRule is correct and have the "true" value.

User ist bereits angemeldet!
Object { isReadOnly: false, isRegistered: true }

But on my View its still "false".

View Result

HTML:

<div class="modal-footer">
            {{customRule}}
            <button title="Anmelden" class="btn btn-primary pull-right" ng-click="anmelden(eventDetails.id,radio.class.klasse2Event_Id)" ng-disabled="customRule.isReadOnly || customRule.isRegistered">Anmelden</button>
           <button title="Löschen" class="btn btn-primary pull-right" ng-click="removeEvent(eventDetails.id)" ng-disabled="customRule.isReadOnly">Event Löschen</button>
        </div>

So my View dont get the updated scope. Can u tell me why ?

I was reading about the angular apply function. But I dont think that helps me. If I do the apply function after my update:

$scope.customRule.isRegistered = isRegistered;
$scope.$apply();

I get following error

Angular Apply Error

EDIT: I dont get why but I fixed the issue:

Now I dont init the customrules anymore. I init this one value (isRegistered) directly after the click event.

Before: $scope.customRule.isRegistered = isRegistered;

After: $scope.isRegistered = isRegistered;

$scope.EventClick = function (event, jsEvent, view) {
                
                var isRegistered;
                var testi;
                
                angular.forEach(event.character, function (pvalue, pkey) {
                    for (var item in pvalue.teilnehmer) {
                        if (pvalue.teilnehmer[item] == CurrenUserName) {
                            console.log("User ist bereits angemeldet!");
                            isRegistered = true;
                            testi = "WAHR";
                        } else {
                            console.log("User ist noch nicht angemeldet!");
                            isRegistered = false;
                            testi = "FALSCH";
                        }
                    }
                });

                $scope.isRegistered = isRegistered;
                $scope.eventDetails = event;
                console.log($scope.customRule);
                //$scope.eventDetails = event;
                $("#detailEvent").css("display", "block");
            };

Answer 1

I can't see where you first initialize $scope.customRule.isRegistered in your controller. However, since $scope.$apply() isn't fixing the issue you most likely are trying to update an undefined variable.

I would suggest initializing $scope.customRule.isRegistered to false or something other than undefined that fits within the logic of your application.

As powerful as AngularJS can be, it has trouble updating views with models that change from an undefined variable to a defined variable.