Simplifying an AngularJs directive that counts the number of characters entered in a textarea I am trying to implement an AngularJS directive that would count the number of characters entered into a textarea and display it to the user. 

Note: it will actually become much more complex later on and will become a full-fledged component that will be similar to the js component used by Stack Overflow for user comments: users will be notified how many more characters they may or must enter with different font colors.

Here is how the markup would look for the initial version:

&lt;div ng-app&gt;
    &lt;div ng-controller="myController"&gt;
       &lt;cmp&gt;
         &lt;enhanced-textarea ng-model="name"&gt;&lt;/enhanced-textarea&gt;
         &lt;h3&gt;{{name}}&lt;/h3&gt;
         &lt;notice&gt;&lt;/notice&gt;           
       &lt;cmp&gt;
     &lt;/div&gt;
&lt;/div&gt;


My js code is as follows:

var myModule = angular.module('myModule', []);
myModule.directive('cmp', function(){
    return {
        restrict: 'E',
        controller: 'cmpCtrl',
        replace: true,
        transclude: true,
        scope: {
            name: '='
        },
        template: '&lt;div ng-transclude&gt;&lt;/div&gt;'
    };
})
.controller('cmpCtrl', function ($scope, $element, $attrs) {
   $scope.$parent.$watch('name', function(newVal){
       if(newVal){
            $scope.$parent.updatedSize = newVal.length;
            console.log(newVal.length);  
       }
   }, true);
})
.directive('enhancedTextarea', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '&lt;textarea ng-transclude&gt;&lt;/textarea&gt;'
    };
})
.directive('notice', function () {
    return {
        restrict: 'E',
        require: '^cmp',
        replace: true,
        scope: {
            updatedSize: '='
        },
        template: '&lt;div&gt;{{size}}&lt;/div&gt;',
        link: function($scope, $element, $attrs, cmpCtrl){
            console.log(cmpCtrl);
            $scope.$parent.$watch('updatedSize', function(newVal){
               if(newVal){
                  $scope.size = newVal;
               }
           }, true);
        }
    };
});

function myController($scope) {
    $scope.name = 'test';
};


I find it overly complex and I am sure it can be simplified.

Can anyone please advise and help perhaps by providing alternatives together with explanations?

Here is the fiddle
Massive overkill indeed,

&lt;span&gt;{{name.length}}&lt;/span&gt;


will do the trick.

On the whole, I am not sure why you would use Angular to write an editor if you are not an expert in Angular. It adds a layer of complexity and eats into performance.