<section id="wrapper" ng-app="otp">
    <div class="content" ng-controller="otpCtrl">
      <form ng-submit="profile.submitPhone()" name="profile.formTelephone" class="form-otp" no-validate> 
        <div class="row">
            <h1>Code Verification</h1>
            <div class="input-code">
                <input type="text" id="otp-number-input-1" class="otp-number-input"  maxlength="1" ng-change="myFunc(this)" ng-model="myValue1" numbers-only>
              
                  <input type="text" id="otp-number-input-2" class="otp-number-input" maxlength="1" ng-change="myFunc(this)" ng-model="myValue2" numbers-only>
              
               <input type="text" id="otp-number-input-3" class="otp-number-input" maxlength="1" ng-change="myFunc(this)" ng-model="myValue3" numbers-only>
              
               <input type="text" id="otp-number-input-4" class="otp-number-input" maxlength="1" ng-change="myFunc(this)" ng-model="myValue4" numbers-only>
              
               <input type="text" id="otp-number-input-5" class="otp-number-input" tabindex="5" maxlength="1" ng-change="myFunc(this)"  ng-model="myValue5" numbers-only>
               <input type="text" id="otp-number-input-6" class="otp-number-input" maxlength="1" ng-change="myFunc(this)"  ng-model="myValue6" numbers-only >        
            </div>
          <input type="text" name="otp-number" id="otp-number" class="" maxlength="6" >
        </div>
        
      </form>
    </div>
</section>

:root {
  background: black;
}

* {
  margin: 0 auto;
  padding:0;
}

.content{
  .form-otp{
    background-color:grey;
    height:650px;
    width:650px;
    text-align: center;
    box-sizing: border-box;
    
    hr{
      width:50%;
    }
    
    h1{
      color:#ffffff;
      margin-top:80px;
      font-weight:700;
      text-shadow: 4px 4px 4px rgba(255, 255, 255, 0.2);
    }
    
  }
  
  .input-code{
    margin-top:50px;
    padding:0 100px;
    display:flex;
    flex-direction:auto;
    justify-content:space-around;
    align-content:space-between;
  }
  
  .otp-number-input{
    background-color:transparent;
    text-align: center;
    line-height: 80px;
    font-size: 50px;
    outline: none;
    width: 10%;
    transition: all .2s ease-in-out;
    border-radius: none;
    border-top:none;
     border-left:none;
     border-right:none;
     border-bottom:2px solid black;
     margin-bottom:50px;
        
     &:focus {
      border-bottom:5px solid orange;
     }
        
     &::selection {
      background: transparent;
     }
  }
  
  .verif-b-orange{
    border-bottom:5px solid orange;
  }
}

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

app.directive('countdown', ['$interval', function ($interval) {
  return {
    scope: {
      timer: '=duration',
      callback: '&timeoutCallback'
    },
    restrict: 'E',
    template: '<span>{{minutes}}:{{seconds}}</span>',
    link: function (scope, element, attrs){

      scope.ipromise = $interval(function() {
        var minutes, seconds;
        minutes = parseInt(scope.timer / 60, 10)
        seconds = parseInt(scope.timer % 60, 10);
        scope.minutes = minutes < 10 ? "0" + minutes : minutes;
        scope.seconds = seconds < 10 ? "0" + seconds : seconds;
        if(scope.timer > 0){
             scope.timer--;   
        }else{
          scope.callback();
          $interval.cancel(scope.ipromise);
        }
      }, 1000);
    }
  };
}]);

app.controller('otpCtrl', ['$scope', function($scope) {
    
    $scope.status = 'countdown started ';
    $scope.verifyCodeOtp = '';
    
    
   
    $scope.myFunc = ( myvalue) => {
        var myEl = document.getElementById("otp-number");
        var num1 = document.getElementById("otp-number-input-1");
        var num2 = document.getElementById("otp-number-input-2");
        var num3 = document.getElementById("otp-number-input-3");
        var num4 = document.getElementById("otp-number-input-4");
        var num5 = document.getElementById("otp-number-input-5");
        var num6 = document.getElementById("otp-number-input-6");
        
        myEl.value = parseInt(num1.value + num2.value + num3.value + num4.value + num5.value + num6.value);
      
        if(num1.value.length === 1){
            num1.classList.add("verif-b-orange"); 
        }else{
           num1.classList.remove("verif-b-orange");
        }
      
        if(num2.value.length === 1){
            num2.classList.add("verif-b-orange"); 
        }else{
           num2.classList.remove("verif-b-orange");
        }
      
        if(num3.value.length === 1){
            num3.classList.add("verif-b-orange"); 
        }else{
           num3.classList.remove("verif-b-orange");
        }
      
        if(num4.value.length === 1){
           num4.classList.add("verif-b-orange"); 
        }else{
           num4.classList.remove("verif-b-orange");
        }
      
        if(num5.value.length === 1){
            num5.classList.add("verif-b-orange"); 
        }else{
           num5.classList.remove("verif-b-orange");
        }
      
         if(num6.value.length === 1){
            num6.classList.add("verif-b-orange"); 
        }else{
           num6.classList.remove("verif-b-orange");
        }
        
        var container = document.getElementsByClassName("input-code")[0];
        container.onkeyup = function(e) {
          var target = e.target;
    
          var maxLength = parseInt(target.attributes["maxlength"].value, 10);
          var myLength = target.value.length;
      
          if (myLength >= maxLength) {
            var next = target;
            while (next = next.nextElementSibling) {
                if (next == null)
                  break;
                if (next.tagName.toLowerCase() == "input") {
                  next.focus();
                  break;
                }
            }
        }else if(myLength < maxLength){
            var prev = target;
            while(prev = prev.previousElementSibling){
              if(prev == null)
                break
              
              if(prev.tagName.toLowerCase() == "input"){
                prev.focus();
                break;
              }
            }
        }
      }
    };
  
   
    
}]);

app.directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^0-9]/g, '');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }            
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});