Semantic Angular Form

Semantic form & ng-validations

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.js"></script>
<div ng-controller="myCtrl" ng-app="myApp">
<form class="ui form"  name="infoForm" novalidate >
  <h4 class="ui dividing header">Shipping Information</h4>
  <div class="field">
  <div class="two fields">
      <div class="required field">
       <label>First Name</label>
   <input type="text" name="first-name" placeholder="First Name" ng-minlength="15" ng-maxlength="20" required> 
    <div ng-if="submitted || infoForm.first-name.$touched" ng-messages="infoForm.first-name.$error">
      <div ng-message="required" class="ui red pointing above label error">Enter First Name</div>
      <div ng-message="minlength" class="ui red pointing above label error">First name must be over 15 characters</div>
      <div ng-message="maxlength" class="ui red pointing above label error">First name must not exceed 20 characters</div>
    </div>
        </div>
      <div class="required field">
       <label>Last Name</label>
        <input type="text" name="last-name" placeholder="LastName" required>
        <div ng-messages="infoForm.last-name.$error" role="alert">
      <div ng-message="required" class="ui red pointing above label error">Enter Last Name</div>
      
      
    </div>
      </div>
    </div>
  </div>
  <div class="two fields">
    <div class="field">
      <label>State</label>
      <select class="ui fluid dropdown"></select>
    </div>
    </div> 
  <h4 class="ui dividing header">Billing Information</h4>

  <div class="fields">
    <div class="seven wide field">
      <label>Card Number</label>
      <input type="number" name="card[number]" maxlength="16" placeholder="Card...

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.saveOrder = function(){
console.log('hi');
 
}
});