AngularJS 1.3.x

angular.module('CharCount', ['angular-character-count'])

  .controller('MainCtrl', function() {

    

  });

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Counter</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <script data-require="angular.js@2.0.0-alpha.26" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="style.css" rel="stylesheet" />

</head>

<body ng-app="CharCount">
  <div ng-controller="MainCtrl">
    <form name="nameForm">
      <div class="row">
        <div class="col-sm-3">
          <input style="width:500px;" class="form-control" type="text" placeholder="Type here" name="firstFormName" ng-model="first_name" ng-maxlength="50" char-count warning-count="10" danger-count="5">
          <span class="error" ng-show="nameForm.firstFormName.$error.maxlength">Too long!</span>
          
          <input style="width:500px;" class="form-control" type="text" placeholder="Type here" name="lastFormName" ng-model="last_name" ng-maxlength="30" char-count warning-count="20" danger-count="10">
          <span class="error" ng-show="nameForm.lastFormName.$error.maxlength">Too long!</span>
          <input style="width:500px;" class="form-control" type="text" placeholder="Type here" name="nickFormName" ng-model="nick_name" ng-maxlength="20" char-count warning-count="10" danger-count="5">
          <span class="error" ng-show="nameForm.nickFormName.$error.maxlength">Too long!</span>
        </div>
      </div>
    </form>
  </div>



  <script src="angular-character-count.js"></script>
  <script src="app.js"></script>
</body>

</html>

/* Put your css in here */

.normalCharacter{
    color: #6D6B6B;
}
.warningCharacter{
    color: #eea236;
}
.dangerCharacter{
    color: #E21A34;
}

/**
 * @author Sufiyan momin
 * @description Add character count to input 
 * for example <input class="form-control" type="text" placeholder="Type here" 
 * name="firstFormName" ng-model="userInfoData.first_name" 
 * ng-maxlength="50" char-count warning-count="10" danger-count="5">
 */

angular.module('angular-character-count', []).directive('charCount', ['$parse', '$compile', function ($parse, $compile) {
    return {
        require: 'ngModel',

        link: function (scope, element, attr, ngModel) {
            var idP = Math.round(Math.random() * 1000000000);

            $(element).after('<p id=' + idP + '></p>');
            scope.$watch(function () {
                    
                    return ngModel.$viewValue;
                },
                function (newValue) {
                    
                    if (angular.isDefined(newValue)) {

                        var remainingChar = attr.ngMaxlength - newValue.length;
                         var remaiSpan = "<p>" + remainingChar + " of " + attr.ngMaxlength + " characters left</p>";
                        $('#' + idP).html(remaiSpan);
console.log(remainingChar);
                        
                        if (remainingChar > attr.warningCount && remainingChar > attr.dangerCount) {
                            $('#' + idP).removeClass('warningCharacter');
                            $('#' + idP).removeClass('dangerCharacter');
                            $('#' + idP).addClass('normalCharacter');
                        } else {
                            if (remainingChar <= attr.warningCount && remainingChar > attr.dangerCount) {
                                $('#' + idP).addClass('warningCharacter');
                                $('#' + idP).removeClass('dangerCharacter');
                                $('#' + idP).removeClass('normalCharacter');
                            } else {
                                $('#' + idP).removeClass('warningCharacter');
                                $('#' + idP).removeClass('normalCharacter');
                                $('#' + idP).addClass('dangerCharacter');
                            }
                        }
                    }
                }
            );

            
     


        }
    };
}]);