Angular scope doesn't update even with apply() : <p>I have a problem with Angular's scope:</p>

<p>Init Angular:</p>

<pre><code>&lt;html lang="en"  ng-app="ant101App" ng-controller="regFormController as reg"&gt;
</code></pre>

<p>Script:</p>

<pre><code>script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
    var app = angular.module('ant101App',[]);
    app.controller('regFormController', function() {
        this.message = null;
        if ((''+this.fname).length &gt; 15) {
                this.message = 'First name should be less than 16 characters!';
        }
    });
&lt;/script&gt;
</code></pre>

<p>HTML:</p>

<pre><code>&lt;p&gt;{{reg.message}}&lt;/p&gt;

 &lt;input ng-model="reg.fname" type="text" name="firstname" class="afirst-name-box" placeholder="First name" required&gt;
</code></pre>

<p>When I enter first name, reg.message doesnt update.
When I use aplly(), it even caused error, and just displayed {{reg.message}} in html page</p>

<pre><code>&lt;script&gt;
    var app = angular.module('ant101App',[]);
    app.controller('regFormController', function() {
        this.message = null;
        this.$apply(function(){
            if ((''+this.fname).length &gt; 15) {
                    this.message = 'First name should be less than 16 characters!';
            }
        });
    });
&lt;/script&gt;
</code></pre>

<p>So how can I update reg.message when reg.fname changed?</p>
