AngularJS form validation not displaying error message

Question

I am trying to do form validation using AngularJS , but somehow the page will not show my required message.

Can someone point me in the right direction that I am missing at this time? I just picked up AngularJS and I'm trying to write a proof of concept, so we can use this in production.

HTML

<form id="signup" class="form-horizontal" name="signup" novalidate> <legend>Register</legend> <div class="control-group"> <div class="control-group"> <label class="control-label">Username</label> <div class="controls"> <div class="input-prepend"> <span class="add-on"><i class="icon-user"></i> </span> <input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required> <span ng-show="signup.uname.$error.required" class="help-inline">Required</span> </div> </div> </div> 

Javascript

 function registerController($scope){ $scope.master = {}; $scope.reset = function(){ $scope.register = angular.copy($scope.master); } }; 

Answer 1

As indicated by J.Pip , the message was not shown due to incorrectly formatted HTML code. It needs to be solved using the code below.

HTML code

 <form id="signup" class="form-horizontal" name="signup" novalidate> <legend>Register</legend> <div class="control-group"> <label class="control-label">Username</label> <div class="controls"> <div class="input-prepend"> <span class="add-on"><i class="icon-user"></i> </span> <input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required /> <span ng-show="signup.uname.$error.required" class="help-inline">Required</span> </div> </div> </div> </form>