Angular+JQ+Bootstrap

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css">
<div >
  <form name="myForm" ng-controller="MyCtrl" ng-submit="submit()">
    userType: <input name="input" ng-model="userType" invalid-model="isInvalid">    
      <a class="btn" ng-click="makeInvalid()">make Invalid</a>
      <a class="btn" ng-click="makeValid()">make Valid</a>
     <input type="submit" class="btn" id="submit" value="Submit" />
     <br>
     <div ng-messages="myForm.input.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
    <div ng-message-default>This field has an input error</div>
  </div>
      <br>
    <tt>userType = {{userType}}</tt><br>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br> 
      
   </form>
</div>

JavaScript

var app=angular.module('myApp', []);

app.controller('MyCtrl', function ($scope,$window) {
  $scope.userType = 'guest';
  $scope.submit = function() {
    if($scope.myForm.$valid) {
       _.bind(alert,$window)("From Submit: It is valid");
    } else {
      _.bind(alert,$window)("From Submit: It is Invalid");
    }
  };
  $scope.isInvalid = false;
  $scope.makeInvalid = function() {    
    $scope.myForm.input.$setValidity("default1", false);
  };
  $scope.makeValid = function() {    
    $scope.myForm.input.$setValidity("default1", true);
  };
});