Strange javascript bug in Angular app
<p>I am seriously confused about this problem:
I have an Angular app and I want to change the class with a simple javascript string update where the class name is bound to the DOM.
The strangest thing is that in my App the simplest statement for changing the text is not working, but if I run the exact same line in the Console of chrome the text is changed. Why does this statement not work in my app? is there  something else going on or am i missing something?</p>

<pre><code> $scope.changesize = function() {
            var fsize = $scope.form_size.split("-").pop();  // "form-group-xs";

            if (fsize == "xs") {fsize = "sm"}; //fsize = "xs";
            if (fsize == "sm") {fsize = "md"};
            if (fsize == "md") {fsize = "lg"};
            if (fsize == "lg") {fsize = "xs"};
            $scope.form_size = "form-group-" + fsize;
            console.log($scope.form_size); // returns "form-group-xs" !!??!!!?!
        }
</code></pre>

<p>Here is a screenshot of my console as proof:
<img src="https://imgur.com/xwIjtuT" alt="console">
<a href="https://imgur.com/xwIjtuT" rel="nofollow noreferrer">http://imgur.com/xwIjtuT</a></p>