Bootstrap input validation error class [closed]

I'm trying to make example from this article using angular+bootstrap. I have this working code:

<div ng-controller="Ctrl">
    <br>
    <hr>

    <form name="signup_form" novalidate ng-submit="signupForm()">
        <fieldset>
            {{' signup_form.submitted \''+signup_form.submitted+ '\' ' }}<br>
            {{' submitted \''+submitted+ '\' ' }}<br>
            {{' $scope.signup_form.$valid \''+signup_form.$valid+ '\'' }}

            <div class="control-group" ng-class="{error: signup_form.name.$dirty && signup_form.name.$invalid}">
                <legend>Signup</legend>
                <div class="row">
                    <div class="span12">
                        <label>Your name</label>
                        <input type="text"
                               placeholder="Name"
                               name="name"
                               class="error"
                               ng-model="signup.name"
                               ng-minlength=3
                               ng-maxlength=20 required/>
                    </div>
                </div>
            </div>
            <button type="submit" class="button radius">Submit</button>
        </fieldset>
    </form>

</div>

http://jsfiddle.net/cQ324/2/

The questions are:

1. This piece of code:

   <div class="control-group" ng-class="{error: signup_form.name.$dirty && signup_form.name.$invalid}">
   

   does not look very nice. I feel it's not good practice to do it this way. How could it be more easy and correct?

2. If I press input field, I instantly got red borders. I found this problem, but it is a very old thread. What's the best and correct way to avoid this red box on empty field click?

Any overall code suggestions are welcome.