JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
	<form name="form" ng-submit="sendForm($event)" novalidate ng-class={submitted:submitted}>
        <!-- first name-->     
		<div class="form-group">
			<label class="control-label" for="firstName">Call Name</label>
			<input class="form-control" type="text" ng-model="person.firstName" required/>
            <div class="alert alert-danger">required</div>
		</div>
        <!-- last name-->     
		<div class="form-group">
			<label class="control-label" for="lastName">Last Name</label>
			<input name="lastName" class="form-control" type="text">
		</div>        
		<div class="form-group">
			<button type="submit" ng-disabled="(form.$submitted && form.$invalid)">Submit!</button>
		</div>
	</form>
</div>

CSS

.submitted input.ng-invalid:not(:focus) {
                background-color: #FA787E;
            }
input.ng-invalid ~ .alert{
    display:none;
}
.submitted input.ng-invalid ~ .alert{
    display:block;
}

.form-group .alert {
  padding: 0px;
  margin-bottom: 0px;
}

JavaScript

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

app.controller('MainCtrl', function($scope) {
  $scope.sendForm = function($event,form) {
      $event.preventDefault()
      $scope.submitted = true
      if(!form.$invalid){alert('valid')}
  };
});