[SOLVED] Angular js: Ng-switch is not updating after ng-click

Angular js: Ng-switch is not updating after ng-click

In my original code, I first check if a user can flag a discussion, if they can I have the ng-switch where if they flag it they will see success message appear:

<div ng-if="canFlag(discussion)">
    <div ng-switch="isFlagging"
        ng-click="flagDiscussion(discussion.id)">

        <i ng-switch-when="false"
            class="icon-flag"
            aria-hidden="true"></i>

        <div ng-switch-when="true"
            ng-click="$event.stopPropagation()"
            >Successfully flagged</div>

    </div>
</div>

I would like to refactor my code such that the ng-click is inside the false ng-switch condition and that I would remove the stopPropagation method such as:

<div ng-if="canFlag(discussion)">
    <div ng-switch="isFlagging">

        <div ng-switch-when="false"
            ng-click="flagDiscussion(discussion.id)">  
            <i class="icon-flag" aria-hidden="true"></i>
        </div>

        <div ng-switch-when="true">Successfully flagged</div>

    </div>
</div>

In the first code, ng-switch works after ng-click, however in the 2nd code, ng-switch remains false even though in the it's getting clicked on. isFlagging is switched to 'true' in the flagdiscussion method. So after clicking on the flag button, flag button is still there and nothing changes.

I saw a similar post AngularJs: why doesn't ng-switch update when I use ng-click? and added x.isFlagging to the switch and also this.isFlagging = true after the click statement, but with this added, I don't even see the flag button anymore.

Anyone know why this is happening?

js code:

$scope.flagDiscussion = function(id) {
        service.flagDiscussion(id);
        this.isFlagging = true;
    };

Solution