Modify the condition to
!loginForm.password.$valid && loginForm.password.$error.maxlength
<div class="form-group" ng-class="{ 'has-error': loginForm.password.$dirty && loginForm.password.$error.required }">
<label for="password">{{ 'PASSWORD' | translate }} <span class="required-field"> *</span></label>
<input uib-tooltip="{{ 'PLEASE_ENTER_PASSWORD' | translate }}" tooltip-placement="right" data-trigger="hover" type="password" name="password" id="password" class="color-tooltip form-control" ng-model="password" ng-maxlength="5" required />
<span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">{{ 'PASSWORDISREQUIRED' | translate }}</span>
<span ng-if="!loginForm.password.$valid && loginForm.password.$error.maxlength" class="help-block">The maximum length allowed for the password is 5 characters</span>
</div>
This will only display the error message if the condition specified is met, which in this case relates to the maximum character limit of the password field.
For illustration purposes:
var app = angular.module("my-app", []);
app.controller("my-controller", ["$scope", function($scope) {
$scope.loginForm = null;
$scope.password = "";
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="my-controller" ng-form="loginForm">
<div class="form-group" ng-class="{ 'has-error': loginForm.password.$dirty && loginForm.password.$error.required }">
<label for="password">Password <span class="required-field"> *</span></label>
<input data-trigger="hover" type="password" name="password" id="password" class="color-tooltip form-control" ng-model="password" ng-maxlength="5" required />
<span ng-show="loginForm.password.$dirty && loginForm.password.$error.required" class="help-block">Password is required</span>
<span ng-if="!loginForm.password.$valid && loginForm.password.$error.maxlength" class="help-block">The maximum length allowed for the password is 5 characters</span>
</div>
</div>