Untitled

.directive('clearText', function () {
        return {
            restrict: "A",
            require: 'ngModel',
            link: function (scope, element, attrs, ctrl) {
                ctrl.$render = function () {
                    element.val(ctrl.$viewValue);
                };

                element.bind('input', function (event) {
                    ctrl.$setViewValue(element.val());
                    tog(!ctrl.$isEmpty(ctrl.$viewValue), 'x');
                });

                element.bind('click', function (event) {
                    if ((event.target.offsetWidth - 24) < (event.clientX - event.target.getBoundingClientRect().left)
                        && !ctrl.$isEmpty(ctrl.$viewValue)) {
                        reset();
                    }
                });

                element.bind('mousemove', function (event) {
                    tog((event.target.offsetWidth - 24) < (event.clientX - event.target.getBoundingClientRect().left)
                         && !ctrl.$isEmpty(ctrl.$viewValue), 'onX');
                });

                function tog(cond, cls) {
                    cond ? angular.element(element).addClass(cls) : angular.element(element).removeClass(cls);
                }

                function reset() {
                    element.removeClass('x');
                    ctrl.$setViewValue(null);
                    ctrl.$render();
                }
            }
        };
    });

<!DOCTYPE html>
<html>

  <head>
      <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>


    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>

   <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


       <style>

 .registration-form .form-control{

     border-radius:2px;

 }


.registration-form .has-error .form-control, .registration-form .has-error .form-control:hover, .registration-form .has-error .form-control:active{

        border-color: red;
   box-shadow: none !important;

}

.has-error input[type="text"]:focus,
.has-error input[type="password"]:focus,
.has-error input[type="number"]:focus{
   background-color: red !important;
}
.registration-form label{
    font-weight: normal;
}

.registration-form .form-group input[type="text"]:focus,
.registration-form .form-group input[type="password"]:focus,
.registration-form .form-group input[type="number"]:focus{

     outline: none;
    box-shadow:none !important;
    background-color:#18b6d6;


 }


.error_message_text{
color:red;
}

    .clearable.x {
     background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAA/klEQVRIS+1UwQ2DMAy0RQboJmWDphL8203aSdpN2j9ITTegm3QAo6AgkKIo2ObBD57BvrMvl0PY+MON8WEnEBXOSlTXdem9fxDR1Tn351CstQdjzAsR703TdGltlqCqKgcAJwDoiOi8RDKBfwCgBIBv27ZWRRAai6JwiHhcIonBvfe/vu9tbpBFF3EkWvCwDWvTHEloMsaMsnCTz1KJ7yAlmRpV4OIG8xQJCWgmV28QChO3hCPWXbGTVBLFmo9rM+5S2TSWJr3Q8E+ysGoDzoqad8LegcbnWhI2KiS3JCT6qJjC7klEF2XYvRHxpg47MYNXFIg2XYGVLd0JRAUHPcjkGaE71EgAAAAASUVORK5CYII=) no-repeat right -10px center;
     background-size: 16px 16px;
     background-position: right 5px center;
}
.clearable.onX{ cursor: pointer; }

</style>
    </head>
    <script>
var app = angular.module('clearTextApp', ['ngMessages']).controller('clearTextAppCtrl', ['$scope', function ($scope) {
                //ng-model
            }])
    .directive('clearText', function () {
        return {
            restrict: "A",
            require: 'ngModel',
            link: function (scope, element, attrs, ctrl) {
                ctrl.$render = function () {
                    element.val(ctrl.$viewValue);
                };

                element.bind('input', function (event) {
                    ctrl.$setViewValue(element.val());
                    tog(!ctrl.$isEmpty(ctrl.$viewValue), 'x');
                });

                element.bind('click', function (event) {
                    if ((event.target.offsetWidth - 24) < (event.clientX - event.target.getBoundingClientRect().left)
                        && !ctrl.$isEmpty(ctrl.$viewValue)) {
                        reset();
                    }
                });

                element.bind('mousemove', function (event) {
                    tog((event.target.offsetWidth - 24) < (event.clientX - event.target.getBoundingClientRect().left)
                         && !ctrl.$isEmpty(ctrl.$viewValue), 'onX');
                });

                function tog(cond, cls) {
                    cond ? angular.element(element).addClass(cls) : angular.element(element).removeClass(cls);
                }

                function reset() {
                    element.removeClass('x');
                    ctrl.$setViewValue(null);
                    ctrl.$render();
                }
            }
        };
    });

    </script>
    <body ng-app='clearTextApp' ng-controller='clearTextAppCtrl'>
  <h2>Search</h2>
      <form role="form" class="form" name="advisorCompanyForm"   novalidate>

          <div class="form-group" data-ng-class="{'has-error' : advisorCompanyForm.$invalid &&  advisorCompanyForm.searchCompanyName.$touched }">
                   <label for="SearchCompanyName"   data-ng-hide="advisorCompanyForm.searchCompanyName.$invalid && advisorCompanyForm.searchCompanyName.$touched">Company Name</label>
                    <span data-ng-show="advisorCompanyForm.searchCompanyName.$invalid &&  advisorCompanyForm.searchCompanyName.$touched" data-ng-messages="advisorCompanyForm.searchCompanyName.$error">
                    <label class="error_message_text" data-ng-message="required">Required</label>
                    <label class="error_message_text" data-ng-message="minlength">Company name should be minimum of 3 characters</label>
                    <label class="error_message_text" data-ng-message="pattern">Special characters are not allowed</label>
                    </span>
<input clear-text type="text"  id="SearchCompanyName"  name="searchCompanyName" class=" clearable form-control"  data-ng-minlength="3"  data-ng-pattern="/^[a-zA-Z0-9]*$/" data-ng-model="searchCompanyName" placeholder="Company Name"   required   />
<!--<span ng-show="( advisorCompanyForm.searchCompanyName.$touched && advisorCompanyForm.searchCompanyName.$error.minlength)" >Minlength</span>
<span ng-show="( advisorCompanyForm.searchCompanyName.$touched && advisorCompanyForm.searchCompanyName.$error.pattern)" >Pattern</span>
<span ng-show="( advisorCompanyForm.searchCompanyName.$touched && advisorCompanyForm.searchCompanyName.$error.required )" >Required</span>  -->
                </div>
  <form>
  <div></div>
</body>
                </html>