AngularJS@1.1.4 simple rich text editor with an iframe

'use strict';
//########################################################################
var app = angular.module('plunker', []);
//########################################################################
//######injecting the dependencies########################################
controllers.MainCtrl.$inject = ['$scope'];
//########################################################################
//###assigning the controllers & the direcitves to the application########
app.directive(directives);
app.controller(controllers);
//########################################################################

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link
    rel="stylesheet"
    href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"
  >
  <link
    rel="stylesheet"
    href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"
  >
  <link rel="stylesheet" href="style.css">
  <link
    rel="stylesheet"
    href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css"
  >
  <link
    rel="stylesheet"
    href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css"
  >
</head>
<body ng-controller="MainCtrl">
  <header class="navbar-fixed-top well">
    <hgroup>
      <div class="btn-group">
        <span class="btn btn-mini" ng-click="doFormat('bold', null)">
          <i class="icon-bold"></i>
        </span>
        <span class="btn btn-mini" ng-click="doFormat('italic', null)">
          <i class="icon-italic"></i>
        </span>
        <span class="btn btn-mini" ng-click="doFormat('underline', null)">
          <i class="icon-underline"></i>
        </span>
        <span class="btn btn-mini" ng-click="doFormat('strikeThrough', null)">
          <i class="icon-strikethrough"></i>
        </span>
      </div>
      <div class="btn-group">
        <span class="btn btn-mini color-picker-red" ng-click="doFormat('ForeColor', 'red')">
          &#9670;
        </span>
        <span class="btn btn-mini color-picker-blue" ng-click="doFormat('ForeColor', 'blue')">
          &#9670;
        </span>
        <span class="btn btn-mini color-picker-green" ng-click="doFormat('ForeColor', 'green')">
          &#9670;
        </span>
      </div>
    </hgroup>
  </header>
  <div class="container well">
    <div class="containment-wrapper">
      <editor></editor>
    </div>
  </div>
  <script src="http://code.angularjs.org/1.1.4/angular.js"></script>
  <script src="controllers.js"></script>
  <script src="directives.js"></script>
  <script src="app.js"></script>
</body>
</html>

.containment-wrapper {
  width: 550px;
  height: 350px;
  padding: 25px;
  margin-top: 25px;
  background: #555;
  outline: 1px solid #000000;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.color-picker-red {
  color: red;
  background: red;
}
.color-picker-blue {
  color: blue;
  background: blue;
}
.color-picker-green {
  color: green;
  background: green;
}
.editor {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;/*
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
  -ms-border-radius: 150px;
  -o-border-radius: 150px;
  border-radius: 150px;*/
  height: 250px;
  width: 250px;
  /*padding: 50px;*/
  overflow: hidden;
  background: #ffffff;
}
.editor:focus,
.editor:hover,
.editor:active {
  outline: none;
}
#richtextfield {
  border: 1px #000000 solid;
  outline: 1px #000000 solid;
  width: 300px;
  height: 300px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;/*
  -webkit-border-radius: 150px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 150px;*/
  background: #ffffff;
  /*padding: 50px;*/
}

'use strict';
//########################################################################
//#####Creating the controllers object to hold all the controllers########
var controllers = {};
//########################################################################
//###################START MainCtrl#######################################
controllers.MainCtrl = function($scope) {};
//###################END MainCtrl#########################################
//########################################################################

'use strict';
//########################################################################
//#####Creating the directives object to hold all the directives##########
var directives = {};
//########################################################################
//###################START editor#########################################
directives.editor = function() {
  return {
    restrict: "E",
    templateUrl: 'frame.html',
    link : function(scope, element, attrs){
      richtextfield.document.designMode = "on";
      scope.doFormat = function(cmd, val) {
        richtextfield.document.execCommand(cmd, null, val);
      };
    }
  };
};
//#####################END editor#########################################
//########################################################################

<iframe name="richtextfield" id="richtextfield">azerty</iframe>