Multiple directives in angular js

var app_top = angular.module('plnkr', []);


app_top.controller('MainCtrl', function($scope) {
  $scope.myText = 'myText';
  $scope.myText_bottom = 'myText_bottom';
});


app_top.directive('fittext', function($timeout) {
  return {
    scope: {
      minFontSize_top: '@',
      maxFontSize_top: '@',
      text: '='
    },
    restrict: 'C',
    transclude: true,
    template: '<div ng-transclude class="textContainer" ng-bind="text"></div>',
    controller: function($scope, $element, $attrs) {
      var maxFontSize_top = $scope.maxFontSize_top || 50;
      var minFontSize_top = $scope.minFontSize_top || 8;

      // text container
      var textContainer = $element[0].querySelector('.textContainer');

      // Add styles
      angular.element(textContainer).css('word-wrap', 'break-word');

      // max dimensions for text container
      var maxHeight = $element[0].offsetHeight;
      var maxWidth = $element[0].offsetWidth;

      var textContainerHeight;
      var textContainerWidth;
      var fontSize = maxFontSize_top;

      var resizeText_top = function() {
        $timeout(function() {
          // set new font size and determine resulting dimensions
          textContainer.style.fontSize = fontSize + 'px';
          textContainerHeight = textContainer.offsetHeight;
          textContainerWidth = textContainer.offsetWidth;

          if ((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize_top) {

            // shrink font size
            var ratioHeight = Math.floor(textContainerHeight / maxHeight);
            var ratioWidth = Math.floor(textContainerWidth / maxWidth);
            var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth;
            fontSize -= shrinkFactor;

            resizeText_top();
          } else {}
        }, 0);
      };

      // watch for changes to text
      $scope.$watch('text', function(newText, oldText) {
        if (newText === undefined) return;

        // text was deleted
        if (oldText !== undefined && newText.length < oldText.length) {
          fontSize = maxFontSize_top;

        }

        resizeText_top();
      });
    }
  };
});

app_top.directive('fittextBottom', function($timeout) {
  return {
    scope: {
      minFontSize_btm: '@',
      maxFontSize_btm: '@',
      text: '=textb'
    },
    restrict: 'C',
    transclude: true,
    template: '<div class="textContainer_bottom" ng-bind="text"></div>',
    controller: function($scope, $element, $attrs) {
      var maxFontSize_btm = $scope.maxFontSize_btm || 50;
      var minFontSize_btm = $scope.minFontSize_btm || 8;

      // text container
      var textContainer_btm = $element[0].querySelector('.textContainer_bottom');

      // Add styles
      angular.element(textContainer_btm).css('word-wrap', 'break-word');

      // max dimensions for text container
      var maxHeight_btm = $element[0].offsetHeight;
      var maxWidth_btm = $element[0].offsetWidth;

      var textContainerHeight_btm;
      var textContainerWidth_btm;
      var fontSize_btm = maxFontSize_btm;

      var resizeText_btm = function() {
        $timeout(function() {
          // set new font size and determine resulting dimensions
          textContainer_btm.style.fontSize = fontSize_btm + 'px';
          textContainerHeight_btm = textContainer_btm.offsetHeight;
          textContainerWidth_btm = textContainer_btm.offsetWidth;

          if ((textContainerHeight_btm > maxHeight_btm || textContainerWidth_btm > maxWidth_btm) && fontSize_btm > minFontSize_btm) {

            // shrink font size
            var ratioHeight_btm = Math.floor(textContainerHeight_btm / maxHeight_btm);
            var ratioWidth_btm = Math.floor(textContainerWidth_btm / maxWidth_btm);
            var shrinkFactor_btm = ratioHeight_btm > ratioWidth_btm ? ratioHeight_btm : ratioWidth_btm;
            fontSize_btm -= shrinkFactor_btm;

            resizeText_btm();
          } else {}
        }, 0);
      };

      // watch for changes to text
      $scope.$watch('text', function(newTextB, oldTextB) {
        if (newTextB === undefined) return;

        // text was deleted
        if (oldTextB !== undefined && newTextB.length < oldTextB.length) {
          fontSize_btm = maxFontSize_btm;
        }

        resizeText_btm();
      });
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="plnkr">

  <div ng-controller="MainCtrl">


    <input required ng-model="myText" name="text1" id="text1" maxlength="250" class="edit-text-inputbox" type="text" placeholder="Start type here (Top)...">
    
    <input required ng-model="myText_bottom" class="edit-text-inputbox" type="text" placeholder="Start type here (Bottom)..." name="text2" id="text2" maxlength="250">


    <div class="fittext" max-font-size="100" text="myText"></div>

    <div class="fittext_bottom" max-font-size="100" textb="myText_bottom"></div>

  </div>
</div>