5 files changed, 95 insertions, 2 deletions
diff --git a/css/angular.css b/css/angular.css
index 9c1ddedb..6c2c52f4 100644
--- a/css/angular.css
+++ b/css/angular.css
@@ -1,5 +1,9 @@
 @charset "UTF-8";
 
+[ng\:cloak], .ng-cloak {
+  display: none;
+}
+
 .ng-format-negative {
   color: red;
 }
diff --git a/docs/src/templates/docs.css b/docs/src/templates/docs.css
index c81555bf..6ba83568 100644
--- a/docs/src/templates/docs.css
+++ b/docs/src/templates/docs.css
@@ -416,3 +416,7 @@ li {
   text-align: left;
   background-color: lightgray;
 }
+
+[ng\:cloak], .ng-cloak {
+  display: none;
+}
diff --git a/docs/src/templates/index.html b/docs/src/templates/index.html
index feb2468f..26c1eaec 100644
--- a/docs/src/templates/index.html
+++ b/docs/src/templates/index.html
@@ -56,7 +56,7 @@
       <input type="text" name="search" id="search-box" placeholder="search the docs"
              tabindex="1" accesskey="s">
 
-      <ul id="content-list" ng:class="sectionId">
+      <ul id="content-list" ng:class="sectionId" ng:cloak>
         <li ng:repeat="page in pages.$filter(search)" ng:class="getClass(page)">
           <a href="{{getUrl(page)}}" ng:class="selectedPartial(page)"
              ng:bind="page.shortName"
@@ -72,7 +72,7 @@
       <ng:include id="content" src="getCurrentPartial()" onload="afterPartialLoaded()"></ng:include>
     </div>
 
-    <div id="footer">
+    <div id="footer" ng:cloak>
       <a id="version"
          ng:href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#{{versionNumber}}"
          ng:bind-template="v{{version}}">
diff --git a/src/directives.js b/src/directives.js
index 2ca7b79b..e0ac6c39 100644
--- a/src/directives.js
+++ b/src/directives.js
@@ -813,3 +813,61 @@ angularDirective("ng:style", function(expression, element){
   };
 });
 
+
+/**
+ * @ngdoc directive
+ * @name angular.directive.ng:cloak
+ *
+ * @description
+ * The `ng:cloak` directive is used to prevent the Angular html template from being briefly
+ * displayed by the browser in its raw (uncompiled) form while your application is loading. Use this
+ * directive to avoid the undesirable flicker effect caused by the html template display.
+ *
+ * The directive can be applied to the `<body>` element, but typically a fine-grained application is
+ * prefered in order to benefit from progressive rendering of the browser view.
+ *
+ * `ng:cloak` works in cooperation with a css rule that is embedded within `angular.js` and
+ *  `angular.min.js` files. Following is the css rule:
+ *
+ * <pre>
+ * [ng\:cloak], .ng-cloak {
+ *   display: none;
+ * }
+ * </pre>
+ *
+ * When this css rule is loaded by the browser, all html elements (including their children) that
+ * are tagged with the `ng:cloak` directive are hidden. When Angular comes across this directive
+ * during the compilation of the template it deletes the `ng:cloak` element attribute, which
+ * makes the compiled element visible.
+ *
+ * For the best result, `angular.js` script must be loaded in the head section of the html file;
+ * alternatively, the css rule (above) must be included in the external stylesheet of the
+ * application.
+ *
+ * Legacy browsers, like IE7, do not provide attribute selector support (added in CSS 2.1) so they
+ * cannot match the `[ng\:cloak]` selector. To work around this limitation, you must add the css
+ * class `ng-cloak` in addition to `ng:cloak` directive as shown in the example below.
+ *
+ * @element ANY
+ *
+ * @example
+   <doc:example>
+     <doc:source>
+        <div id="template1" ng:cloak>{{ 'hello' }}</div>
+        <div id="template2" ng:cloak class="ng-cloak">{{ 'hello IE7' }}</div>
+     </doc:source>
+     <doc:scenario>
+       it('should remove the template directive and css class', function() {
+         expect(element('.doc-example-live #template1').attr('ng:cloak')).
+           not().toBeDefined();
+         expect(element('.doc-example-live #template2').attr('ng:cloak')).
+           not().toBeDefined();
+       });
+     </doc:scenario>
+   </doc:example>
+ *
+ */
+angularDirective("ng:cloak", function(expression, element) {
+  element.removeAttr('ng:cloak');
+  element.removeClass('ng-cloak');
+});
diff --git a/test/directivesSpec.js b/test/directivesSpec.js
index 488ebaa2..1d26973c 100644
--- a/test/directivesSpec.js
+++ b/test/directivesSpec.js
@@ -381,4 +381,31 @@ describe("directive", function(){
 
   });
 
+  describe('ng:cloak', function() {
+
+    it('should get removed when an element is compiled', function() {
+      var element = jqLite('<div ng:cloak></div>');
+
+      expect(element.attr('ng:cloak')).toBe('');
+
+      angular.compile(element)
+
+      expect(element.attr('ng:cloak')).toBeUndefined();
+    });
+
+
+    it('should remove ng-cloak class from a compiled element', function() {
+      var element = jqLite('<div ng:cloak class="foo ng-cloak bar"></div>');
+
+      expect(element.hasClass('foo')).toBe(true);
+      expect(element.hasClass('ng-cloak')).toBe(true);
+      expect(element.hasClass('bar')).toBe(true);
+
+      angular.compile(element);
+
+      expect(element.hasClass('foo')).toBe(true);
+      expect(element.hasClass('ng-cloak')).toBe(false);
+      expect(element.hasClass('bar')).toBe(true);
+    });
+  });
 });