title: Check whether input field is empty in Controller - AngularJS
body: <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>