JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
<form name="modelParamsForm" novalidate>    

	<div class="form-group col-md-4" ng-repeat="modelParam in modelParams" ng-class="{ 'has-error' : modelParamsFieldForm.value.$invalid }">
    <ng-form name="modelParamsFieldForm">
        <label class="col-md-5">{{ modelParam.paramname }}</label>              
        <input type="number" class="form-control input-sm col-md-5" ng-model="modelParam.value" name="value" ng-min="modelParam.minvalue" 
            ng-max="modelParam.maxvalue" required style="maxhight: 20px">
        <span ng-show="modelParamsFieldForm.value.$invalid"></span> 
        <span ng-if="modelParamsFieldForm.value.$viewValue.length > modelParam.maxvalue">Too Many!!</span>
        <span ng-if="modelParamsFieldForm.value.$viewValue.length < modelParam.minvalue">Too Few!!</span>
    </ng-form>
  </div>
</form>
</div>

JavaScript

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

// add a controller
myApp.controller("MyCtrl", MyCtrl);

function MyCtrl($scope) {
    $scope.modelParams = [
    	{
        model: "MAF", 
        paramname: "CascDefaultSpreadOverride",
        minvalue: "2", 
        maxvalue: "5"
      },
      {
        model: "Mod2", 
        paramname: "ParamMod2",
        minvalue: "3", 
        maxvalue: "10"
      },
    ];
}