diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index ead15fbb4e..50142fb58e 100644
--- a/public/_includes/_scripts-include.jade
+++ b/public/_includes/_scripts-include.jade
@@ -16,8 +16,9 @@ script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular
 script(src="/resources/js/site.js")
 script(src="/resources/js/controllers/app-controller.js")
 script(src="/resources/js/directives/bio.js")
-script(src="/resources/js/directives/code.js")
 script(src="/resources/js/directives/code-tabs.js")
+script(src="/resources/js/directives/code-pane.js")
+script(src="/resources/js/directives/code-example.js")
 
 
 <!-- GA -->
diff --git a/public/docs/js/latest/guide/_layout.jade b/public/docs/js/latest/guide/_layout.jade
index 41824d43f5..35040681c8 100644
--- a/public/docs/js/latest/guide/_layout.jade
+++ b/public/docs/js/latest/guide/_layout.jade
@@ -9,7 +9,7 @@ html(lang="en" ng-app="angularIOApp")
     != partial("../../../../_includes/_hero")
     != partial("../../../../_includes/_banner")
 
-    article.l-content-small.grid-fluid.docs-content(ng-non-bindable)
+    article.l-content-small.grid-fluid.docs-content
       != yield
       != partial("../../../../_includes/_next-item")
 
diff --git a/public/resources/css/module/_code-box.scss b/public/resources/css/module/_code-box.scss
index bbd1f8ac81..00784634a6 100644
--- a/public/resources/css/module/_code-box.scss
+++ b/public/resources/css/module/_code-box.scss
@@ -2,7 +2,6 @@
   border-radius: 4px;
   background: $steel;
   box-shadow: 0px 2px 5px rgba($coal, .3);
-  display: none;
   margin-bottom: $unit * 2;
 
   header {
@@ -24,7 +23,9 @@
       font-weight: 500;
       text-transform: none;
 
-      &.is-selected {
+      &.is-selected,
+      &.selected
+       {
         background: $blueberry;
         color: $snow;
       }
diff --git a/public/resources/js/directives/code-example.js b/public/resources/js/directives/code-example.js
new file mode 100644
index 0000000000..06e7811787
--- /dev/null
+++ b/public/resources/js/directives/code-example.js
@@ -0,0 +1,28 @@
+/*
+* Code Example Directive
+*
+* Formats codes examples and prevents
+* Angular code from being processed.
+*/
+
+angularIO.directive('codeExample', function() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    scope: {
+      name: '@',
+      language: '@',
+      format: '@'
+    },
+
+    link: function(scope, element, attrs, codeSwitchController, transcludeFunc) {
+      transcludeFunc( scope, function( content ) {
+        var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
+        element.append(code);
+      });
+    },
+
+    template:'<pre class="prettyprint {{format}} lang-{{language}}"></pre>'
+  };
+});
\ No newline at end of file
diff --git a/public/resources/js/directives/code-pane.js b/public/resources/js/directives/code-pane.js
new file mode 100644
index 0000000000..89e53005c5
--- /dev/null
+++ b/public/resources/js/directives/code-pane.js
@@ -0,0 +1,33 @@
+/*
+* Code Pane Directive
+*
+* @requires codeTab Directive
+*
+* Invidiual panes displayed in the the
+* codeTab elements
+*/
+
+angularIO.directive('codePane', function() {
+  return {
+    require: '^codeTabs',
+    restrict: 'E',
+    transclude: true,
+    replace: true,
+    scope: {
+      name: '@',
+      language: '@',
+      format: '@'
+    },
+
+    link: function(scope, element, attrs, codeTabController, transcludeFunc) {
+      transcludeFunc( scope, function( content ) {
+        var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
+        element.append(code);
+      });
+
+      codeTabController.addPane(scope);
+    },
+
+    template:'<pre class="prettyprint {{format}} lang-{{language}}" ng-show="selected"></pre>'
+  };
+});
\ No newline at end of file
diff --git a/public/resources/js/directives/code-tabs.js b/public/resources/js/directives/code-tabs.js
index e777e39bb9..bd309cb3c6 100644
--- a/public/resources/js/directives/code-tabs.js
+++ b/public/resources/js/directives/code-tabs.js
@@ -1,85 +1,71 @@
 /*
-* Code Tabs
+* Code Tabs Directive
 *
+* Creates a tabs code examples that
+* displayed in the same container
 */
 
-var getTabName = function(name) {
-  var prettyName = name;
-
-  switch(name) {
-    case 'es5':         prettyName = 'ES5';         break;
-    case 'typescript':  prettyName = 'TypeScript';  break;
-    default:            prettyName = name;
-  }
-
-  return prettyName;
-};
-
-angularIO.directive('code-tabs', function() {
+angularIO.directive('codeTabs', function($timeout) {
   return {
-    template: 'Name: {{customer.name}} Address: {{customer.address}}'
-  };
+    restrict: 'E',
+    scope: {},
+    transclude: true,
+    replace: true,
+
+    controller: function ($scope) {
+      $scope.panes = [];
 
 
-  $scope.language = 'es5';
-  var $codeBoxes = $('.code-box');
+      /*
+      * Add Code Pane List of Panes
+      *
+      */
 
-  if($codeBoxes.length) {
-    //UPDATE ALL CODE BOXES
-    $codeBoxes.each(function(index, codeBox) {
-      //REGISTER ELEMENTS
-      var $codeBox = $(codeBox);
-      var $examples = $codeBox.find('.prettyprint');
-      var $firstItem = $($examples[0]);
-      var $header = $("<header class='code-box-header'></header>");
-      var $nav = $("<nav class='code-box-nav'></nav>");
-      var selectedName = '';
+      this.addPane = function(pane) {
+        if ($scope.panes.length === 0) {
+          $scope.showPane(pane);
+        }
 
-      //HIDE/SHOW CONTENT
-      $examples.addClass('is-hidden');
-      $firstItem.removeClass('is-hidden');
+        $scope.panes.push(pane);
+      };
 
-      //UPDATE NAV FOR EACH CODE BOX
-      $examples.each(function(index, example) {
-        var $example = $(example);
-        var name = $example.data('name');
-        var tabName = getTabName(name);
-        var selected = (index === 0) ? 'is-selected' : '';
-        var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + tabName + "</button>");
 
-        // ADD EVENTS FOR CODE SNIPPETS
-        $button.on('click', function(e) {
-          e.preventDefault();
-          var $currentButton = $(e.currentTarget);
-          var $buttons = $nav.find('.button');
-          var selectedName = $currentButton.data('name');
-          $buttons.removeClass('is-selected');
-          $currentButton.addClass('is-selected');
+      /*
+      * Show selected Code Examples
+      *
+      */
 
-          //UPDAT VIEW ON SELECTTION
-          $examples.addClass('is-hidden');
-          var $currentExample = $codeBox.find(".prettyprint[data-name='" + selectedName + "']");
-          $currentExample.removeClass('is-hidden').addClass('animated fadeIn');
+      $scope.showPane = function(pane) {
+        // RESET ALL EXAMPLES
+        angular.forEach($scope.panes, function(pane) {
+          pane.selected = false;
         });
 
-        $nav.append($button);
+        // SELECT CURRENT EXAMPLE
+        pane.selected = true;
+      };
+
+
+      /*
+      * Finish Rendereding then prettify code
+      *
+      */
+
+      $scope.$watch($scope.panes.$last,function(){
+        $timeout(prettyPrint, 1);
       });
+    },
 
-      //ADD HEADER TO DOM
-      $header.append($nav);
-      $codeBox.prepend($header);
-    });
-
-    //FADEIN EXAMPLES
-    $codeBoxes.addClass('is-visible');
-  }
-
-  // TOGGLE CODE LANGUAGE
-  $scope.toggleCodeExample = function(event, name) {
-    event.preventDefault();
-    $scope.language = language;
+    template:
+      '<div class="code-box">' +
+      ' <header class="code-box-header">' +
+      '   <nav class="code-box-nav">' +
+      '    <button ng-repeat="pane in panes" ng-click="showPane(pane)" class="button" ng-class="{selected:pane.selected}">' +
+      '      {{pane.name}}' +
+      '    </button>' +
+      '   </nav>' +
+      ' </header>' +
+      ' <div class="code-box-examples" ng-transclude></div>' +
+      '</div>'
   };
-
-
-});
-
+});
\ No newline at end of file
diff --git a/public/resources/js/directives/code.js b/public/resources/js/directives/code.js
deleted file mode 100644
index fe8d5c5309..0000000000
--- a/public/resources/js/directives/code.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-* Code Formatting
-*
-*/
-
-
-angularIO.directive('pre', function() {
-  return {
-    template: 'Name: {{customer.name}} Address: {{customer.address}}'
-  };
-
-
-  if($codeBlocks.length) {
-    $codeBlocks.each(function(index, codeEl) {
-      var $codeEl = $(codeEl);
-
-      if(!$codeEl.hasClass('prettyprint')) {
-        $codeEl.addClass('prettyprint linenums');
-      }
-    });
-  }
-
-});
\ No newline at end of file