angular directives, using angular directives to manipulate the dom and change also using them as form validation

app.js

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

myApp.controller('mainController', ['$scope', '$filter', function($scope, $filter) {

  $scope.handle = "";

  $scope.lowerCaseFilter = function() {
    return $filter('lowercase')($scope.handle);
  };

  $scope.characters = 5;

  $scope.rules = [

    { rulename: "Must be more than 5 characters."},
    { rulename: "Must not be used elsewhere."},
    { rulename: "Must be rad yeah"}

  ];

}]);

index.html

<div ng-controller="mainController">

          <label>What is your twitter handle</label>
          <input type="text" ng-model="handle"/>

          <div class="alert" ng-class="{'alert-warning': handle.length < characters}" ng-show="handle.length !== characters">
            <div ng-show="handle.length < characters">
              you got less than 5 characters
            </div>
          </div>

          <hr/>

          <h1>twitter.com/{{lowerCaseFilter()}}</h1>

          <h3>Rules</h3>
          <ul>
            <li ng-repeat="rule in rules">
              {{ rule.rulename }}
            </li>
          </ul>

        </div>