refactor(directives): connect new compiler

- turn everything into a directive

5 files changed, 234 insertions, 225 deletions

diff --git a/docs/content/api/angular.inputType.ngdoc b/docs/content/api/angular.inputType.ngdoc
index bfd5fe6f..9cbf9eb2 100644
--- a/docs/content/api/angular.inputType.ngdoc
+++ b/docs/content/api/angular.inputType.ngdoc
@@ -84,7 +84,7 @@ All `inputType` widgets support:
   it('should invalidate on wrong input', function() {
     expect(element('form[name=myForm]').prop('className')).toMatch('ng-valid');
     input('data').enter('{}');
-    expect(binding('data')).toEqual('data={\n  }');
+    expect(binding('data')).toEqual('{}');
     input('data').enter('{');
     expect(element('form[name=myForm]').prop('className')).toMatch('ng-invalid');
   });
diff --git a/docs/content/guide/dev_guide.expressions.ngdoc b/docs/content/guide/dev_guide.expressions.ngdoc
index b7ecc521..61592897 100644
--- a/docs/content/guide/dev_guide.expressions.ngdoc
+++ b/docs/content/guide/dev_guide.expressions.ngdoc
@@ -185,16 +185,20 @@ Extensions: You can further extend the expression vocabulary by adding new metho
    {name:'Julie', phone:'555-8765'}]"></div>
  Search: <input ng:model="searchText"/>
  <table class="example3">
-   <tr><th>Name</th><th>Phone</th><tr>
-   <tr ng:repeat="friend in friends | filter:searchText">
-     <td>{{friend.name}}</td>
-     <td>{{friend.phone}}</td>
-   </tr>
+   <thead>
+     <tr><th>Name</th><th>Phone</th><tr>
+   </thead>
+   <tbody>
+     <tr ng:repeat="friend in friends | filter:searchText">
+       <td>{{friend.name}}</td>
+       <td>{{friend.phone}}</td>
+     </tr>
+    </tbody>
  </table>
 </doc:source>
 <doc:scenario>
  it('should filter the list', function() {
-    var tr = using('table.example3').repeater('tr.ng-attr-widget');
+    var tr = using('table.example3 tbody').repeater('tr');
     expect(tr.count()).toBe(5);
     input('searchText').enter('a');
     expect(tr.count()).toBe(2);
diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc
index 35f42036..c33596e6 100644
--- a/docs/content/guide/dev_guide.forms.ngdoc
+++ b/docs/content/guide/dev_guide.forms.ngdoc
@@ -277,20 +277,20 @@ The following example demonstrates:
 
 This example shows how to implement a custom HTML editor widget in Angular.
 
-    <doc:example>
+    <doc:example module="formModule">
       <doc:source>
         <script>
           function EditorCntl($scope) {
             $scope.htmlContent = '<b>Hello</b> <i>World</i>!';
           }
 
-          HTMLEditorWidget.$inject = ['$element', '$scope', 'htmlFilter'];
-          function HTMLEditorWidget(element, scope, htmlFilter) {
+          HTMLEditorWidget.$inject = ['$scope', '$element', '$sanitize'];
+          function HTMLEditorWidget(scope, element, $sanitize) {
             scope.$parseModel = function() {
               // need to protect for script injection
               try {
-                this.$viewValue = htmlFilter(
-                  this.$modelValue || '').get();
+                this.$viewValue = $sanitize(
+                  this.$modelValue || '');
                 if (this.$error.HTML) {
                   // we were invalid, but now we are OK.
                   this.$emit('$valid', 'HTML');
@@ -312,24 +312,25 @@ This example shows how to implement a custom HTML editor widget in Angular.
             });
           }
 
-          angular.directive('ng:html-editor-model', function() {
-            return ['$formFactory', '$element', function ($formFactory, element) {
-              var exp = element.attr('ng:html-editor-model'),
-                  form = $formFactory.forElement(element),
-                  widget;
-              element.attr('contentEditable', true);
-              widget = form.$createWidget({
-                scope: this,
-                model: exp,
-                controller: HTMLEditorWidget,
-                controllerArgs: {$element: element}});
-              // if the element is destroyed, then we need to
-              // notify the form.
-              element.bind('$destroy', function() {
-                widget.$destroy();
-              });
-            }];
-          });
+          angular.module.formModule = function($compileProvider){
+            $compileProvider.directive('ngHtmlEditorModel', function ($formFactory) {
+              return function(scope, element, attr) {
+                var form = $formFactory.forElement(element),
+                    widget;
+                element.attr('contentEditable', true);
+                widget = form.$createWidget({
+                  scope: scope,
+                  model: attr.ngHtmlEditorModel,
+                  controller: HTMLEditorWidget,
+                  controllerArgs: {$element: element}});
+                // if the element is destroyed, then we need to
+                // notify the form.
+                element.bind('$destroy', function() {
+                  widget.$destroy();
+                });
+              };
+            });
+          };
         </script>
         <form name='editorForm' ng:controller="EditorCntl">
           <div ng:html-editor-model="htmlContent"></div>
@@ -337,7 +338,7 @@ This example shows how to implement a custom HTML editor widget in Angular.
           HTML: <br/>
           <textarea ng:model="htmlContent" cols="80"></textarea>
           <hr/>
-          <pre>editorForm = {{editorForm}}</pre>
+          <pre>editorForm = {{editorForm|json}}</pre>
         </form>
       </doc:source>
       <doc:scenario>
diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js
index db49088d..bee59234 100644
--- a/docs/src/templates/doc_widgets.js
+++ b/docs/src/templates/doc_widgets.js
@@ -1,4 +1,4 @@
-(function() {
+angular.module('ngdocs.directives', [], function($compileProvider) {
 
   var angularJsUrl;
   var scripts = document.getElementsByTagName("script");
@@ -22,119 +22,122 @@
     ' </body>\n' +
     '</html>';
 
-  angular.widget('doc:example', ['$injector', '$browser', '$location', '$element',
-                        function($injector,    $browser,   $location,   element){
-    this.descend(false); // do not compile the example code
-    var module = element.attr('module') || '';
-
-    //jQuery find() methods in this widget contain primitive selectors on purpose so that we can use
-    //jqlite instead. jqlite's find() method currently supports onlt getElementsByTagName!
-    var example = element.find('pre').eq(0),  //doc-source
-        scriptSrc = '',
-        htmlSrc = example.text().replace(/<script[^\>]*>([\s\S]+)<\/script>/im, function(_, script) {
-            scriptSrc = script;
-            return '';
-          }),
-        showSource = example.attr('source') !== 'false',
-        jsfiddle = example.attr('jsfiddle') || true,
-        scenario = element.find('pre').eq(1); //doc-scenario
-
-    var tabs = angular.element('<ul class="doc-example">');
-
-    // show source tab, if not disabled
-    if (showSource) {
-      tabs.append(
-        '<li class="doc-example-heading"><h3>Source</h3></li>' +
-        '<li class="doc-example-source" ng:non-bindable>' +
-        jsFiddleButton(jsfiddle) + // may or may not have value
-        '<pre class="brush: js; html-script: true; toolbar: false;"></pre></li>');
-    }
-    // show live preview tab
-    var livePreviewTab;
-    tabs.append('<li class="doc-example-heading"><h3>Live Preview</h3></li>');
-    tabs.append(livePreviewTab = angular.element('<li class="doc-example-live">' + htmlSrc +'</li>'));
-    // show scenario tab, if present
-    if (scenario.text()) {
-      tabs.append(
-        '<li class="doc-example-heading"><h3>Scenario Test</h3></li>' +
-        '<li class="doc-example-scenario"><pre class="brush: js">' + scenario.text() + '</pre></li>');
-    }
-
-    tabs.find('li').eq(1).find('pre').text(
-      HTML_TEMPLATE.
-        replace('_SCRIPT_SOURCE_', scriptSrc ? ' <script>\n' + indent(scriptSrc, '  ') + '\n </script>\n'  : '').
-        replace('_HTML_SOURCE_', indent(htmlSrc, '  ')).
-        replace('_MODULE_', module ? '="' + module + '"' : ''));
+  $compileProvider.directive('docExample', ['$injector', '$log', '$browser', '$location',
+                                    function($injector,   $log,   $browser,   $location) {
+    return {
+      terminal: true,
+      compile: function(element, attrs) {
+        var module = element.attr('module') || '';
+
+        //jQuery find() methods in this widget contain primitive selectors on purpose so that we can use
+        //jqlite instead. jqlite's find() method currently supports onlt getElementsByTagName!
+        var example = element.find('pre').eq(0),  //doc-source
+            scriptSrc = '',
+            htmlSrc = example.text().replace(/<script[^\>]*>([\s\S]+)<\/script>/im, function(_, script) {
+                scriptSrc = script;
+                return '';
+              }),
+            showSource = example.attr('source') !== 'false',
+            jsfiddle = example.attr('jsfiddle') || true,
+            scenario = element.find('pre').eq(1); //doc-scenario
+
+        var tabs = angular.element('<ul class="doc-example">');
+
+        // show source tab, if not disabled
+        if (showSource) {
+          tabs.append(
+            '<li class="doc-example-heading"><h3>Source</h3></li>' +
+            '<li class="doc-example-source" ng:non-bindable>' +
+            jsFiddleButton(jsfiddle) + // may or may not have value
+            '<pre class="brush: js; html-script: true; toolbar: false;"></pre></li>');
+        }
+        // show live preview tab
+        var livePreviewTab;
+        tabs.append('<li class="doc-example-heading"><h3>Live Preview</h3></li>');
+        tabs.append(livePreviewTab = angular.element('<li class="doc-example-live">' + htmlSrc +'</li>'));
+        // show scenario tab, if present
+        if (scenario.text()) {
+          tabs.append(
+            '<li class="doc-example-heading"><h3>Scenario Test</h3></li>' +
+            '<li class="doc-example-scenario"><pre class="brush: js">' + scenario.text() + '</pre></li>');
+        }
 
-    element.html('');
-    element.append(tabs);
+        tabs.find('li').eq(1).find('pre').text(
+          HTML_TEMPLATE.
+            replace('_SCRIPT_SOURCE_', scriptSrc ? ' <script>\n' + indent(scriptSrc, '  ') + '\n </script>\n'  : '').
+            replace('_HTML_SOURCE_', indent(htmlSrc, '  ')).
+            replace('_MODULE_', module ? '="' + module + '"' : ''));
 
-    try {
-      if (window.execScript) { // IE
-        window.execScript(scriptSrc || '"stupid IE!"'); // IE complains when evaling empty string
-      } else {
-        window.eval(scriptSrc);
-      }
-    } catch (e) {
-      alert(e);
-    }
+        element.html('');
+        element.append(tabs);
 
-    return function() {
-      var scope = this;
-      var modules = [
-        'ng',
-        function($provide) {
-          $provide.value('$browser', $browser);
-          $provide.value('$location', $location);
+        try {
+          if (window.execScript) { // IE
+            window.execScript(scriptSrc || '"stupid IE!"'); // IE complains when evaling empty string
+          } else {
+            window.eval(scriptSrc);
+          }
+        } catch (e) {
+          alert(e);
         }
-      ];
-      module && modules.push(module);
-
-      angular.bootstrap(livePreviewTab, modules).invoke(function($rootScope) {
-        element.bind('$destroy', scope.$root.$watch(function() {
-          $rootScope.$digest();
-        }));
-      });
-    };
 
-    function jsFiddleButton(jsfiddle) {
-      var fixJsFiddleIssue132 = true;
-      if (jsfiddle !== 'false') {
-        if(jsfiddle === true) {
-          //dynamically generate a fiddle
-          var fiddleUrl = 'http://jsfiddle.net/api/post/library/pure/';
-
-          function jsFiddleEscape(text, prefix) {
-            return indent(text.replace(/<\/textarea>/gi,'&lt;/textarea&gt;'), prefix);
+        return function(docsAppScope) {
+          var modules = [
+            function($provide) {
+              $provide.value('$browser', $browser);
+              $provide.value('$location', $location);
+            }
+          ];
+          module && modules.push(module);
+
+          angular.bootstrap(livePreviewTab, modules).
+              invoke(['$rootScope', function(example$rootScope) {
+                element.bind('$destroy', docsAppScope.$root.$watch(function() {
+                  // this propagates the $watch from the docs app to the example app
+                  example$rootScope.$digest();
+                }));
+              }]);
+        };
+
+        function jsFiddleButton(jsfiddle) {
+          var fixJsFiddleIssue132 = true;
+          if (jsfiddle !== 'false') {
+            if(jsfiddle === true) {
+              //dynamically generate a fiddle
+              var fiddleUrl = 'http://jsfiddle.net/api/post/library/pure/';
+
+              function jsFiddleEscape(text, prefix) {
+                return indent(text.replace(/<\/textarea>/gi,'&lt;/textarea&gt;'), prefix);
+              }
+
+              return '<form class="jsfiddle" method="post" action="' + fiddleUrl + '" target="_blank">' +
+                        (fixJsFiddleIssue132 ? '' : '<textarea name="resources">' + angularJsUrl + '</textarea>') +
+                        '<textarea name="css">\n' +
+                          (fixJsFiddleIssue132 ? '</style>\n<script src="' + angularJsUrl + '"></script>\n<style>\n' : '') +
+                          '.ng-invalid { border: 1px solid red; } \n' +
+                          'body { font-family: Arial,Helvetica,sans-serif; }\n' +
+                          'body, td, th { font-size: 14px; margin: 0; }\n' +
+                          'table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }\n' +
+                          'a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }\n' +
+                          '.error { color: red; }\n' +
+                        '</textarea>' +
+                        '<input type="text" name="title" value="AngularJS Live Example">' +
+                        '<textarea name="html">' +
+                          '<div ng:app' + (module ? '="' + module + '"' : '') + '>\n' + jsFiddleEscape(htmlSrc, ' ') + '\n</div>' +
+                        '</textarea>' +
+                        '<textarea name="js">' + jsFiddleEscape(scriptSrc) + '</textarea>' +
+                        '<button>edit at jsFiddle</button>' +
+                      '</form>';
+            } else {
+              //use existing fiddle
+              fiddleUrl = "http://jsfiddle.net" + jsfiddle;
+              return '<form class="jsfiddle" method="get" action="' + fiddleUrl + '" target="_blank">' +
+                       '<button>edit at jsFiddle</button>' +
+                     '</form>';
+            }
           }
-
-          return '<form class="jsfiddle" method="post" action="' + fiddleUrl + '" target="_blank">' +
-                    (fixJsFiddleIssue132 ? '' : '<textarea name="resources">' + angularJsUrl + '</textarea>') +
-                    '<textarea name="css">\n' +
-                      (fixJsFiddleIssue132 ? '</style>\n<script src="' + angularJsUrl + '"></script>\n<style>\n' : '') +
-                      '.ng-invalid { border: 1px solid red; } \n' +
-                      'body { font-family: Arial,Helvetica,sans-serif; }\n' +
-                      'body, td, th { font-size: 14px; margin: 0; }\n' +
-                      'table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }\n' +
-                      'a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }\n' +
-                      '.error { color: red; }\n' +
-                    '</textarea>' +
-                    '<input type="text" name="title" value="AngularJS Live Example">' +
-                    '<textarea name="html">' +
-                      '<div ng:app' + (module ? '="' + module + '"' : '') + '>\n' + jsFiddleEscape(htmlSrc, ' ') + '\n</div>' +
-                    '</textarea>' +
-                    '<textarea name="js">' + jsFiddleEscape(scriptSrc) + '</textarea>' +
-                    '<button>edit at jsFiddle</button>' +
-                  '</form>';
-        } else {
-          //use existing fiddle
-          fiddleUrl = "http://jsfiddle.net" + jsfiddle;
-          return '<form class="jsfiddle" method="get" action="' + fiddleUrl + '" target="_blank">' +
-                   '<button>edit at jsFiddle</button>' +
-                 '</form>';
-        }
+        };
       }
-      return '';
     }
   }]);
 
@@ -163,93 +166,95 @@
     return lines.join('\n');
   }
 
-  var HTML_TPL =
-      '<p><a ng:init="showInstructions = {show}" ng:show="!showInstructions" ng:click="showInstructions = true" href>Workspace Reset Instructions &nbsp;&#x27A4;</a></p>' +
-      '<div ng:controller="TutorialInstructionsCtrl" ng:show="showInstructions">' +
-        '<div class="tabs-nav">' +
-          '<ul>' +
-          '</ul>' +
-        '</div>' +
-        '<div class="tabs-content"><div class="tabs-content-inner">' +
-
-        '</div></div>' +
+  $compileProvider.directive('docTutorialInstructions', function() {
+    var HTML_NAV = '<li ng:class="currentCls(\'{id}\')"><a ng:click="select(\'{id}\')" href>{title}</a></li>';
+    var HTML_CONTENT = '<div ng:show="selected==\'{id}\'">{content}</div>';
+
+    var HTML_TPL =
+        '<p><a ng:init="showInstructions = {show}" ng:show="!showInstructions" ng:click="showInstructions = true" href>Workspace Reset Instructions &nbsp;&#x27A4;</a></p>' +
+        '<div ng:controller="TutorialInstructionsCtrl" ng:show="showInstructions">' +
+          '<div class="tabs-nav">' +
+            '<ul>' +
+            '</ul>' +
+          '</div>' +
+          '<div class="tabs-content"><div class="tabs-content-inner">' +
+
+          '</div></div>' +
+        '</div>';
+
+    var DEFAULT_NAV =
+      '<li ng:class="currentCls(\'git-mac\')"><a ng:click="select(\'git-mac\')" href>Git on Mac/Linux</a></li>' +
+      '<li ng:class="currentCls(\'git-win\')"><a ng:click="select(\'git-win\')" href>Git on Windows</a></li>' +
+      '<li ng:class="currentCls(\'ss-mac\')"><a ng:click="select(\'ss-mac\')" href>Snapshots on Mac/Linux</a></li>' +
+      '<li ng:class="currentCls(\'ss-win\')"><a ng:click="select(\'ss-win\')" href>Snapshots on Windows</a></li>';
+
+    var DEFAULT_CONTENT =
+      '<div ng:show="selected==\'git-mac\'">' +
+        '<ol>' +
+        '<li><p>Reset the workspace to step {step}.</p>' +
+        '<pre><code> git checkout -f step-{step}</code></pre></li>' +
+        '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
+        '</ol>' +
+      '</div>' +
+
+      '<div ng:show="selected==\'git-win\'">' +
+        '<ol>' +
+        '<li><p>Reset the workspace to step {step}.</p>' +
+        '<pre><code> git checkout -f step-{step}</code></pre></li>' +
+        '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
+        '</ol>' +
+      '</div>' +
+
+      '<div ng:show="selected==\'ss-mac\'">' +
+        '<ol>' +
+        '<li><p>Reset the workspace to step {step}.</p>' +
+        '<pre><code> ./goto_step.sh {step}</code></pre></li>' +
+        '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
+        '</ol>' +
+      '</div>' +
+
+      '<div ng:show="selected==\'ss-win\'">' +
+        '<ol>' +
+        '<li><p>Reset the workspace to step {step}.</p>' +
+        '<pre><code> ./goto_step.bat {step}</code></pre></li>' +
+        '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
+        '</ol>' +
       '</div>';
 
-  var HTML_NAV = '<li ng:class="currentCls(\'{id}\')"><a ng:click="select(\'{id}\')" href>{title}</a></li>';
-  var HTML_CONTENT = '<div ng:show="selected==\'{id}\'">{content}</div>';
-
-  var DEFAULT_NAV =
-    '<li ng:class="currentCls(\'git-mac\')"><a ng:click="select(\'git-mac\')" href>Git on Mac/Linux</a></li>' +
-    '<li ng:class="currentCls(\'git-win\')"><a ng:click="select(\'git-win\')" href>Git on Windows</a></li>' +
-    '<li ng:class="currentCls(\'ss-mac\')"><a ng:click="select(\'ss-mac\')" href>Snapshots on Mac/Linux</a></li>' +
-    '<li ng:class="currentCls(\'ss-win\')"><a ng:click="select(\'ss-win\')" href>Snapshots on Windows</a></li>';
-
-  var DEFAULT_CONTENT =
-    '<div ng:show="selected==\'git-mac\'">' +
-      '<ol>' +
-      '<li><p>Reset the workspace to step {step}.</p>' +
-      '<pre><code> git checkout -f step-{step}</code></pre></li>' +
-      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
-      '</ol>' +
-    '</div>' +
-
-    '<div ng:show="selected==\'git-win\'">' +
-      '<ol>' +
-      '<li><p>Reset the workspace to step {step}.</p>' +
-      '<pre><code> git checkout -f step-{step}</code></pre></li>' +
-      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
-      '</ol>' +
-    '</div>' +
-
-    '<div ng:show="selected==\'ss-mac\'">' +
-      '<ol>' +
-      '<li><p>Reset the workspace to step {step}.</p>' +
-      '<pre><code> ./goto_step.sh {step}</code></pre></li>' +
-      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
-      '</ol>' +
-    '</div>' +
-
-    '<div ng:show="selected==\'ss-win\'">' +
-      '<ol>' +
-      '<li><p>Reset the workspace to step {step}.</p>' +
-      '<pre><code> ./goto_step.bat {step}</code></pre></li>' +
-      '<li><p>Refresh your browser or check the app out on <a href="http://angular.github.com/angular-phonecat/step-{step}/app">angular\'s server</a>.</p></li>' +
-      '</ol>' +
-    '</div>';
-
-  angular.widget('doc:tutorial-instructions', function(element) {
-    this.descend(true);
-
-    var tabs = angular.element(HTML_TPL.replace('{show}', element.attr('show') || 'false')),
-        nav = tabs.find('ul'),
-        // use simple selectors because jqLite find() supports getElementsByTagName only
-        content = tabs.find('div').find('div'),
-        children = element.children();
-
-    if (children.length) {
-      // load custom content
-      angular.forEach(element.children(), function(elm) {
-        elm = angular.element(elm);
-        var id = elm.attr('id');
-
-        nav.append(HTML_NAV.replace('{title}', elm.attr('title')).replace(/\{id\}/g, id));
-        content.append(HTML_CONTENT.replace('{id}', id).replace('{content}', elm.html()));
-      });
-    } else {
-      // default
-      nav.append(DEFAULT_NAV);
-      content.append(DEFAULT_CONTENT.replace(/\{step\}/g, element.attr('step')));
-    }
+    return {
+      compile: function(element, attrs) {
+        var tabs = angular.element(HTML_TPL.replace('{show}', attrs.show || 'false')),
+            nav = tabs.find('ul'),
+            // use simple selectors because jqLite find() supports getElementsByTagName only
+            content = tabs.find('div').find('div'),
+            children = element.children();
+
+        if (children.length) {
+          // load custom content
+          angular.forEach(element.children(), function(elm) {
+            elm = angular.element(elm);
+            var id = elm.attr('id');
+
+            nav.append(HTML_NAV.replace('{title}', elm.attr('title')).replace(/\{id\}/g, id));
+            content.append(HTML_CONTENT.replace('{id}', id).replace('{content}', elm.html()));
+          });
+        } else {
+          // default
+          nav.append(DEFAULT_NAV);
+          content.append(DEFAULT_CONTENT.replace(/\{step\}/g, element.attr('step')));
+        }
 
-    element.html('');
-    element.append(tabs);
+        element.html('');
+        element.append(tabs);
+      }
+    }
   });
 
 
-  angular.directive('doc:tutorial-nav', function(step) {
-    return function(element) {
+  $compileProvider.directive('docTutorialNav', function() {
+    return function(scope, element, attrs) {
       var prevStep, codeDiff, nextStep,
-          content;
+          content, step = attrs.docTutorialNav;
 
       step = parseInt(step, 10);
 
@@ -282,4 +287,4 @@
       return (step < 10) ? ('0' + step) : step;
     }
   });
-})();
+});
diff --git a/docs/src/templates/docs.js b/docs/src/templates/docs.js
index 7fb9cb22..b9fc0407 100644
--- a/docs/src/templates/docs.js
+++ b/docs/src/templates/docs.js
@@ -125,11 +125,6 @@ function DocsController(scope, $location, $window, $cookies, $filter) {
   }
 }
 
-// prevent compilation of code
-angular.widget('code', function(element) {
-  element.attr('ng:non-bindable', 'true');
-});
-
 SyntaxHighlighter['defaults'].toolbar = false;
 SyntaxHighlighter['defaults'].gutter = true;
 
@@ -151,7 +146,7 @@ function TutorialInstructionsCtrl($cookieStore) {
   };
 }
 
-angular.module('ngdocs', [], function($locationProvider, $filterProvider) {
+angular.module('ngdocs', ['ngdocs.directives'], function($locationProvider, $filterProvider, $compileProvider) {
   $locationProvider.html5Mode(true).hashPrefix('!');
 
   $filterProvider.register('title', function(){
@@ -161,4 +156,8 @@ angular.module('ngdocs', [], function($locationProvider, $filterProvider) {
       });
     };
   });
+
+  $compileProvider.directive('code', function() {
+    return { terminal: true };
+  });
 });