tabindex is not working with required attribute

Question

<div class="row">
            <div class="col-md-6">

                <div class="form-body">
                    <div class="form-group">
                        <label>First Name</label>
                        <div class="input-group">
                            <input type="text" tabIndex="1" name="first_name" class="form-control">
                        </div>
                    </div>
                <div class="form-group">
                    <label>Email Address</label>
                    <div class="input-group">
                        <input type="email" tabIndex="3" name="username"  class="form-control" ng-model="username" required  user-exist /><br/>  <span style="color: red" ng-show="partnerForm.username.$touched && partnerForm.username.$invalid">
                            <span ng-show="partnerForm.username.$error.required">Email is required.</span>    
                            <span ng-show="partnerForm.username.$error.email">Enter Correct Format.</span>  
                            <span ng-show="partnerForm.username.$error.userExist">User already exists.</span>
                        </span>  
                    </div>
                </div>

                </div>

            </div>
            <div class="col-md-6">

                <div class="form-body">
                    <div class="form-group">
                        <label>Last Name</label>
                        <div class="input-group">
                            <input type="text" tabIndex="2" name="last_name" class="form-control">
                        </div>
                    </div>
                </div>


            </div>
        </div>

the tabindex 3 is not working.i have checked by removing the required attr then it is working .the attributes required and tabindex is conflicting with each other.please help me to solve this.or provide a directive (working) for tabindex.