<div class="row" ng-app="myapp" ng-controller="myctrl">
  <div class="col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3">  
    <div class="main-padd">
      <div class="otp-text">Please enter the OTP</div>

      <form name="otpForm">
        <div class="otp-inputs">
          <div class="row ">
            <div class="col-sm-3 col-xs-3">
              <input type="number" name="" class="custom-input-otp text-center" ng-model="val1" maxlength="1" move-next-on-maxlength id="1" />
            </div>
            <div class="col-sm-3 col-xs-3">
              <input type="number" name="" class="custom-input-otp text-center" ng-model="val2" maxlength="1" move-next-on-maxlength id="2" />
            </div>
            <div class="col-sm-3 col-xs-3">
              <input type="number" name="" class="custom-input-otp text-center" ng-model="val3" maxlength="1" move-next-on-maxlength id="3" />
            </div>
            <div class="col-sm-3 col-xs-3">
              <input type="number" name="" class="custom-input-otp text-center" ng-model="val4" maxlength="1" move-next-on-maxlength id="4"/>
            </div>
          </div><!--row ends-->
        </div><!--otp-inputs-->
        <div class="btn-center">
          <button class="btn btn-custom" type="submit" ng-click="submit()"> SUBMIT </button>
        </div>
      </form><!--otpForm ends-->
    </div><!--main-padd ends-->
  </div>
</div><!--row ends-->
.main-padd {
  border-radius: 4px;
  background: #3a1b49;
  margin-top: 20px;
  padding: 10px 30px;
}

@media screen and (max-width:1081px){
  .otp-inputs {
    margin:0 0 30px!important;
  }
}

.otp-text {
  color: #fff;
  font-size: 25px;
  margin-bottom: 30px;
  text-align: center;
}

.otp-inputs {
  margin: 0 100px 30px;
  text-align: center;
}

.btn-custom, .btn-custom:hover, .btn-custom:active, , .btn-custom:focus {
  background: #e3a700;
  color: #fff;
}

.btn-center {
  text-align: center;
}

.custom-input-otp {
  width: 35px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
View Compiled
'use strict'
var app = angular.module('myapp', [])

app.controller('myctrl', function($scope){
  $scope.submit = function() {
    if($scope.val1 && $scope.val2 && $scope.val3 && $scope.val4) {
      alert('Form submitted');
    } else {
      alert('Enter all fields')
    }
  }
})

// move cursor to next input feild
app.directive("moveNextOnMaxlength", function () {
  return {
    restrict: "A",
    link: function link($scope, element) {
      element.on("input", function (e) {
        if (element.val().length == element.attr("maxlength")) {
          var nextElement = element.parent().next().find('input').attr('id');
          $('#' + nextElement).focus();
        }
      });
    }
  };
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js