Check whether input field is empty in Controller - AngularJS
<p>I just started learning AngularJS. In a testing program I wrote, I need to check whether my input field is empty or not inside the controller(script). </p>

<p>Following is the code I wrote</p>

<pre><code>&lt;div ng-controller="ExampleController"&gt;
    &lt;input type="text" ng-model="userFirstName" required/&gt;&lt;br&gt;
    &lt;p ng-bind="msg"&gt;&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
    var mainApp = angular.module("mainApp", []);
    mainApp.controller('ExampleController', function ($scope) {

       if($scope.userFirstName.length === 0){
          $scope.msg = "pls enter something";
       }else{
          $scope.msg = "Something Entered";
       }
    });
&lt;/script&gt;
</code></pre>

<p>Here, as the output, I expected to see <code>pls enter something</code>. But I cannot see anything. </p>

<p>But If I change the script in to following with some small changes, it shows me <code>Something Entered</code> as expected. </p>

<pre><code>&lt;script&gt;
   var mainApp = angular.module("mainApp", []);
   mainApp.controller('ExampleController', function ($scope) {
        $scope.userFirstName = 'Something';
        if($scope.userFirstName.length === 0){
             $scope.msg = "pls enter something";
        }else{
             $scope.msg = "Something Entered";
        }
   });
&lt;/script&gt;
</code></pre>

<p>What is wrong here? As far as I understand, the first one should work if the second one works as expected. Otherwise, both should not work. </p>

<p>I think I have not understood something very basic. If so, please describe me what I have not read about. </p>

<p>Thank You..!</p>