Wire-up validation

textbox.js

angular.module('ui.textbox', [])
  .directive('textbox', [function () {
		return {
			restrict: 'E',
			replace: true,
			require: '^form',
			scope: {
				model: '=',
				name: '=',
				uiName: '@',
				blur: '&'
			},
			template:
				'<div class="control-group" ng-class="{error: formElement.$dirty && formElement.$invalid}">' +
				'	<label class="control-label" for="{{name}}" title="{{uiName}}">{{uiName}}</label>' +
				'	<div class="controls">' +
				'		<input type="text" ng-model="model" placeholder="{{uiName}}" class="input-medium" ng-blur="blur()">' +
				'		<span ng-show="formElement.$dirty && formElement.$error.required" class="help-inline">{{uiName}} is required.</span>' +
				'	</div>' +
				'</div>',
			compile: function (tElem, tAttrs) {
				var $input = $(tElem).find('input').attr({
					id: tAttrs.name,
					name: tAttrs.name,
				});

				if (tAttrs.required === "true") {
					$input.attr({
						required: true
					});
				}

				if (tAttrs.size) {
					$input.removeClass('input-medium');
					$input.addClass(tAttrs.size);
				}
				return function(scope, element, attrs, form) {
					scope.formElement = form[attrs.name];
				};
			},
		};
	}]);

view.html

  	<textbox model="questions.QuestionOne.Question" name="QuestionOne" ui-name="Question One" required="true" size="input-large" />