Angular Directive to set the fontColor to black/white according whats better readable to the given background-color.

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.4" data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="Ctrl">
    <div class="blk" ng-repeat="color in colors track by $index" 
      ng-style="{'background-color':'#'+color}"
      cd-readable-color="color"
    >
        Franz jagt im komelett verrückten Taxi
        <br>
        <input type="text" ng-model="colors[$index]">
    </div>
    
    <p></p>
    <button ng-click="addColor()">Add color</button>
    
  </body>

</html>

angular.module('app', []);

angular.module('app').controller('Ctrl', ['$scope', function ($scope) {
  $scope.colors = [
    'ff00ff',
    'ff0000',
    'FFFF00',
    '999999',
    'dedede',
    'a3d221',
    '121212',
    '5A000A',
    'E34C31',
    '028C02',
    'D1AF19',
    'FFF2B8',
    '6E6E00',
    'E0A03D',
    '0D1F48'
  ]; 
  
  $scope.addColor = function() {
    $scope.colors.push('FFFFFF');
  };
}]);


angular.module('app').directive('cdReadableColor', function() {
  return {
    'restrict': 'A',
    'scope': {
      color: '=cdReadableColor'
    },
    'link': function link(scope, element, attrs) {
      
      function getReadableColor(color) {
        var r,g,b,erg,m;
        if(color.length == 7 && color.substr(1) == '#') color = color.substr(1);
        if((m = color.match(/^rgb\(([0-9]+), ?([0-9]+), ?([0-9]+)\)$/))) {
          r = m[1];
          g = m[2];
          b = m[3];
        } else if(color.length == 6) {
          r = parseInt(color.substr(0,2), 16);
          g = parseInt(color.substr(2,2), 16);
          b = parseInt(color.substr(4,2), 16);
        } else if(color.length == 3) {
          r = parseInt(color.substr(0,1)+color.substr(0,1), 16);
          g = parseInt(color.substr(1,1)+color.substr(1,1), 16);
          b = parseInt(color.substr(2,1)+color.substr(2,1), 16);
        } else {
          r = g = b = 255;
        }
    
        erg = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
        return (erg > 0.5) ? '#000000' : '#ffffff';
      }

      if(scope.color) {
        scope.$watch('color', function() {
          element.css('color', getReadableColor(scope.color));  
        });
      } else {
        element.ready(function(){
          element.css('color', getReadableColor(element.css('background-color')));  
        });
      }
    }
  }
});

/* Styles go here */

.blk {
  padding: 10px;
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 10px;
}

input[type=text] {
  border: 1px solid #aaa;
  padding: 2px;
  width: 60px;
}