form validation not working correctly in ui-router

问题:

I have a form validation using bootstrap and It is working, but when I added it to my project that is running UI-router if breaks some of the CSS functionality for the function. So I think that it is being broken by the UI-Router. Basically it won't hind the error message until it is called. It just loads into a visible state. Is there someone that has run across this that could take a look at it.

I have two Plkr illistrating the issue. One working without UI-Router and On Not working With UI-Router.--> You will find the validated form under the Phone Tab.

Also I How do I set the min and max numbers correctly?

<div class="form-group" show-errors>
    <label class="control-label">Phone Number</label>
    <input type="number" min="10" max="10" class="form-control" 
        name="phonenumber" ng-model="phonenumber" 
        required placeholder="phone number with area code" />
    <p class="help-block" ng-if="userForm.phonenumber.$error.required">
        The Phone number is required
    </p>
    <p class="help-block" ng-if="userForm.phonenumber.$error.min">
        Oops! You don't have enough numbers. Format the phone number like 
        this "Ex: 4155551234"
    </p>
    <p class="help-block" ng-if="userForm.phonenumber.$error.max">
        Oops! You have too many numbers. Format the phone number like this 
        "Ex: 4155551234"
    </p>
 </div>