Validation failing in IE9 using angular js

I am pretty new to Angular JS .Here I have a simple form as below: test3.php:

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="http://code.angularjs.org/1.2.4/angular.min.js"></script> 
</head>
<body>
    <form name="myForm" id="myForm" ng-controller="Register" ng-submit="submit()" action="test2.php" method="post">
    <label>First Name:</label>
    <input type="input" name="firstname" ng-model="firstname" required>

    <label>Last Name:</label>
    <input type="input" name="lastname" ng-model="lastname" required>

    <label>Email:</label>
    <input type="email" name="email" ng-model="email" required>

    <input type="submit" id="submit" value="Submit" />

</form>
  <script>

  function Register($scope) {
    $scope.firstname = '';
    $scope.lastname = '';
    $scope.email = '';
    $scope.submit = function() {
        document.getElementById('myForm').submit();
  };
  }
  </script>
  </body>
  </html>

And test2.php:

 <?php
      echo $_POST['firstname'];
 ?>

When I load test3.php and click on submit without filling any details, I get the message to fill the fields accordingly and the form is not submitted to test2.php. When all the details are entered properly and then if I click Submit, I see the $_POST['firstname] value. This works correctly in chrome and firefox.

But in IE9, there is no validation at all. On click of Submit, the form is submitted always, be the fields empty or not.

How do I make this code work in IE9 and further? The Angular JS API provides help for IE versions 8 and less.

The cause is due to the fact that (IE < 10) are not HTML5 compliant with respect to client-side validation and therefore wont return true if a "required" attribute is present on the input element, but instead return the (string) attribute value.

Use ngRequired instead of required attribute.