AngularJS 1.3.x

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.error {
    background-color:coral;
    padding:40px;
}
.edited {
    background-color:blue;
    padding:40px;
}
</style>
<body ng-app="">
<form name="innerForm">
  <div class="error">test</div>
  <br />
  <div ng-class="{error: innerForm[val].$invalid}">test 
            <input  name="val" id="val" ng-class="{edited: innerForm[val].$dirty"
          type="text" ng-pattern="/^\d*\.?\d{0,2}$/" ng-required />
          </div>
</form>
</body>
</html>

/* Put your css in here */