angular.js form

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .my-form{
                transition: all linear 0.5s;
                background: transparent;
            }
            .my-form.ng-invalid{
                background-color: red;
            }
        </style>
    </head>
    <body ng-app="app">
        <form name="myForm"  class="my-form">
            userType: <input type="text" name="input" ng-model="userType" required="required"/><br />
            <span class="error" ng-show="myForm.input.$error.required">Required!</span><br />
            <code>userType:{{userType}}</code><br />
            <code>$valid:{{myForm.input.$valid}}</code><br />
            <code>$error:{{myForm.input.$error}}</code><br />
            <code>myForm.$valid: {{myForm.$valid}}</code><br />
            <code>myForm.$error.required:{{myForm.$error.required}}</code>
        </form>
        <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="'+window.location.pathname+'"/>'));
        </script>
        <script type="text/javascript">
            var app = angular.module('app' , []);
                /*app.controller('formController' , ['$scope' , function($scope){
                    $scope.userType = 'gest';
                }])*/
        </script>
    </body>
</html>