diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorfootercontentleft.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorfootercontentleft.directive.js
index 70b6027f0e..630146184c 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorfootercontentleft.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorfootercontentleft.directive.js
@@ -8,23 +8,27 @@ Use this directive to align content left inside the main editor footer.
 
 <h3>Markup example</h3>
 <pre>
-    <div ng-controller="Umbraco.Controller as vm">
+    <div ng-controller="MySection.Controller as vm">
 
-        <umb-editor-view>
+        <form name="mySectionForm" novalidate>
 
-            <umb-editor-footer>
+            <umb-editor-view>
 
-                <umb-editor-footer-content-left>
-                    // align content left
-                </umb-editor-footer-content-left>
+                <umb-editor-footer>
 
-                <umb-editor-footer-content-right>
-                    // align content right
-                </umb-editor-footer-content-right>
+                    <umb-editor-footer-content-left>
+                        // align content left
+                    </umb-editor-footer-content-left>
 
-            </umb-editor-footer>
+                    <umb-editor-footer-content-right>
+                        // align content right
+                    </umb-editor-footer-content-right>
 
-        </umb-editor-view>
+                </umb-editor-footer>
+
+            </umb-editor-view>
+
+        </form>
 
     </div>
 </pre>
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorfootercontentright.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorfootercontentright.directive.js
index e82ae29cdd..e966a871e9 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorfootercontentright.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorfootercontentright.directive.js
@@ -8,23 +8,27 @@ Use this directive to align content right inside the main editor footer.
 
 <h3>Markup example</h3>
 <pre>
-    <div ng-controller="Umbraco.Controller as vm">
+    <div ng-controller="MySection.Controller as vm">
 
-        <umb-editor-view>
+        <form name="mySectionForm" novalidate>
 
-            <umb-editor-footer>
+            <umb-editor-view>
 
-                <umb-editor-footer-content-left>
-                    // align content left
-                </umb-editor-footer-content-left>
+                <umb-editor-footer>
 
-                <umb-editor-footer-content-right>
-                    // align content right
-                </umb-editor-footer-content-right>
+                    <umb-editor-footer-content-left>
+                        // align content left
+                    </umb-editor-footer-content-left>
 
-            </umb-editor-footer>
+                    <umb-editor-footer-content-right>
+                        // align content right
+                    </umb-editor-footer-content-right>
 
-        </umb-editor-view>
+                </umb-editor-footer>
+
+            </umb-editor-view>
+
+        </form>
 
     </div>
 </pre>