Validation Bootstrap Select - Loaded by AJAX

I am trying to add validation to bootstrap-select but somehow validation doesn't work

First I am selecting main category from other bootstrap select and then

Sub Category loading with ajax as expected...

<select name="code" class="form-control" id="code">
</select>

JS

<script type="text/javascript">
  $('#code').on('change', function(e) {
                // Revalidate the date field
              $('#createSubCode').formValidation('revalidateField', 'code');
          });
</script>

more

    <script type="text/javascript">
  $(document).ready(function() {
    $('#createSubCode')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                title: {
                    validators: {
                        notEmpty: {
                            message: 'The title is required'
                        }
                    }
                },
                code: {
                    validators: {
                        notEmpty: {
                            message: 'The code is required'
                        }
                    }
                }
            }
        })

});
</script>

So whenever I select says code is required! Validation doesn't pass!

I found the problem

AJAX

FROM

$.each(data,function(index,subCateObj){
      $('#code').append('<option>'+subCateObj+'</option>');
    });

TO

$.each(data,function(index,subCateObj){
      $('#code').append('<option value='+subCateObj+'>'+subCateObj+'</option>');
    });