diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index 1e0a30a173..e41bf8f3c7 100644
--- a/public/_includes/_scripts-include.jade
+++ b/public/_includes/_scripts-include.jade
@@ -17,6 +17,7 @@ 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/cheatsheet.js")
+script(src="/resources/js/directives/api-list.js")
 script(src="/resources/js/directives/bio.js")
 script(src="/resources/js/directives/bold.js")
 script(src="/resources/js/directives/code.js")
diff --git a/public/docs/js/latest/api/index.jade b/public/docs/js/latest/api/index.jade
index dd52c5cf65..d672174832 100644
--- a/public/docs/js/latest/api/index.jade
+++ b/public/docs/js/latest/api/index.jade
@@ -1,18 +1 @@
-div(ng-cloak).banner
-  dl.api-key
-    dt Display:
-    dd.directive(ng-class='{ active: apiType === "directive" }' ng-click='setType("directive")') Directive
-    dd.class(ng-class='{ active: apiType === "class" }' ng-click='setType("class")') Class
-    dd.interface(ng-class='{ active: apiType === "interface" }' ng-click='setType("interface")') Interface
-    dd.function(ng-class='{ active: apiType === "function" }' ng-click='setType("function")') Function
-    dd.const(ng-class='{ active: apiType === "const" }' ng-click='setType("const")') Const or Enum
-    dd.var(ng-class='{ active: apiType === "var" }' ng-click='setType("var")') Variable
-  input.api-filter(placeholder='Filter', ng-model='apiFilter')
-article(class="l-content-small grid-fluid docs-content")
-  div(ng-repeat='section in apiSections' ng-if="(apiList[section.name] | filter: { title: apiFilter, docType: apiType }).length" ng-cloak)
-    h3 {{ section.title }}
-    ul.api-list
-      li.api-item(ng-repeat='item in apiList[section.name] | filter: { title: apiFilter, docType: apiType }')
-        a(ng-href='{{ item.path }}')
-          span(class='symbol {{ item.docType }}')
-          | {{ item.title }}
+api-list(src="api-list.json")
\ No newline at end of file
diff --git a/public/docs/ts/latest/api/index.jade b/public/docs/ts/latest/api/index.jade
index 3f2c8885b8..d672174832 100644
--- a/public/docs/ts/latest/api/index.jade
+++ b/public/docs/ts/latest/api/index.jade
@@ -1,18 +1 @@
-div(ng-cloak).banner
-  dl.api-key
-    dt Display:
-    dd.directive(ng-class='{ active: appCtrl.apiType === "directive" }' ng-click='appCtrl.setType("directive")') Directive
-    dd.class(ng-class='{ active: appCtrl.apiType === "class" }' ng-click='appCtrl.setType("class")') Class
-    dd.interface(ng-class='{ active: appCtrl.apiType === "interface" }' ng-click='appCtrl.setType("interface")') Interface
-    dd.function(ng-class='{ active: appCtrl.apiType === "function" }' ng-click='appCtrl.setType("function")') Function
-    dd.const(ng-class='{ active: appCtrl.apiType === "const" }' ng-click='appCtrl.setType("const")') Const or Enum
-    dd.var(ng-class='{ active: appCtrl.apiType === "var" }' ng-click='appCtrl.setType("var")') Variable
-  input.api-filter(placeholder='Filter', ng-model='appCtrl.apiFilter')
-article(class="l-content-small grid-fluid docs-content")
-  div(ng-repeat='section in appCtrl.apiSections' ng-if="(appCtrl.apiList[section.name] | filter: { title: appCtrl.apiFilter, docType: appCtrl.apiType }).length" ng-cloak)
-    h3 {{ section.title }}
-    ul.api-list
-      li.api-item(ng-repeat='item in appCtrl.apiList[section.name] | filter: { title: appCtrl.apiFilter, docType: appCtrl.apiType }')
-        a(ng-href='{{ item.path }}')
-          span(class='symbol {{ item.docType }}')
-          | {{ item.title }}
+api-list(src="api-list.json")
\ No newline at end of file
diff --git a/public/resources/css/module/_api.scss b/public/resources/css/module/_api.scss
index c54100a270..0bcbc76714 100644
--- a/public/resources/css/module/_api.scss
+++ b/public/resources/css/module/_api.scss
@@ -21,7 +21,8 @@
     content: 'N';
     background: #757575;
   }
-  &.var:before {
+  &.var:before,
+  &.let:before {
     content: 'V';
     background: #9575cd;
   }
diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js
index 6d5770be5f..4b1e77b8b2 100644
--- a/public/resources/js/controllers/app-controller.js
+++ b/public/resources/js/controllers/app-controller.js
@@ -1,15 +1,11 @@
 /*
- * Apllication Controller
+ * Application Controller
  *
  */
 
 angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', function ($mdDialog, $timeout, $http, $sce) {
   var vm = this;
 
-  $http.get('/resources/js/app-data.json').then(function(response) {
-    vm.apiList = response.data;
-  });
-
   vm.showDocsNav = false;
   vm.showMainNav = false;
   vm.showMenu    = false;
@@ -29,11 +25,6 @@ angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', funct
     vm.showMenu = !vm.showMenu;
   };
 
-  vm.setType = function (type) {
-    if (type === vm.apiType) vm.apiType = '';
-    else vm.apiType = type;
-  };
-
   vm.openFeedback = function() {
     var configuration = {
       'productId': '410509',
@@ -43,21 +34,6 @@ angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', funct
     userfeedback.api.startFeedback(configuration);
   };
 
-  vm.apiSections = [
-    { name: 'angular2/core', title: 'angular2/core' },
-    { name: 'angular2/common', title: 'angular2/common' },
-    { name: 'angular2/animate', title: 'angular2/animate' },
-    { name: 'angular2/http', title: 'angular2/http' },
-    { name: 'angular2/http/testing', title: 'angular2/http/testing' },
-    { name: 'angular2/instrumentation', title: 'angular2/instrumentation' },
-    { name: 'angular2/platform/browser', title: 'angular2/platform/browser' },
-    { name: 'angular2/router', title: 'angular2/router' },
-    { name: 'angular2/router/testing', title: 'angular2/router/testing' },
-    { name: 'angular2/testing', title: 'angular2/testing' }
-  ];
-  vm.apiType     = '';
-  vm.apiFilter   = '';
-
   /*
    * Prettify Code
    *
diff --git a/public/resources/js/directives/api-list.js b/public/resources/js/directives/api-list.js
new file mode 100644
index 0000000000..621d0526b2
--- /dev/null
+++ b/public/resources/js/directives/api-list.js
@@ -0,0 +1,66 @@
+angularIO.directive('apiList', function () {
+  return {
+    restrict: 'E',
+    template:
+      '<div ng-cloak="ng-cloak" class="banner">' +
+      '  <dl class="api-key">' +
+      '    <dt>Display:</dt>' +
+      '    <dd ng-repeat="apiType in $ctrl.apiTypes" ng-class="{ active: $ctrl.apiType === apiType }" ng-click="$ctrl.setType(apiType)" class="{{apiType.cssClass}}">{{apiType.title}}</dd>' +
+      '  </dl>' +
+      '  <input placeholder="Filter" ng-model="$ctrl.apiFilter" class="api-filter">' +
+      '</div>' +
+      '<article class="l-content-small grid-fluid docs-content">' +
+      '  <div ng-repeat="section in $ctrl.filteredSections" ng-cloak="ng-cloak">' +
+      '    <h3>{{ section.title }}</h3>' +
+      '    <ul class="api-list">' +
+      '      <li ng-repeat="item in section.items" class="api-item">' +
+      '        <a ng-href="{{ item.path }}"><span class="symbol {{ item.docType }}"></span>{{ item.title }}</a>' +
+      '      </li>' +
+      '    </ul>' +
+      '  </div>' +
+      '</article>',
+    controllerAs: '$ctrl',
+    controller: function($scope, $attrs, $http) {
+      var $ctrl = this;
+
+      $ctrl.apiType     = null;
+      $ctrl.apiFilter   = '';
+      $ctrl.filteredSections = [];
+
+      $ctrl.setType = function (type) {
+        if (type === $ctrl.apiType) $ctrl.apiType = null;
+        else $ctrl.apiType = type;
+      };
+
+      $http.get($attrs.src).then(function(response) {
+        $ctrl.sections = response.data;
+      });
+
+      $ctrl.apiTypes = [
+        { cssClass: 'directive', title: 'Directive', matches: ['directive'] },
+        { cssClass: 'class', title: 'Class', matches: ['class'] },
+        { cssClass: 'interface', title: 'Interface', matches: ['interface'] },
+        { cssClass: 'function', title: 'function', matches: ['function'] },
+        { cssClass: 'const', title: 'Const or Enum', matches: ['const', 'enum'] },
+        { cssClass: 'var', title: 'Variable', matches: ['var', 'let'] }
+      ];
+
+      $scope.$watchGroup(
+        [function() { return $ctrl.apiFilter}, function() { return $ctrl.apiType; }, function() { return $ctrl.sections; }],
+        function(filter, type, sections) {
+          $ctrl.filteredSections.length = 0;
+          angular.forEach($ctrl.sections, function(section, title) {
+            var filteredItems = section.filter(function(item) {
+              var matchesDocType = !$ctrl.apiType || $ctrl.apiType.matches.indexOf(item.docType) !== -1;
+              var matchesTitle = $ctrl.apiFilter == '' || item.title.toLowerCase().indexOf($ctrl.apiFilter.toLowerCase()) !== -1;
+              return matchesDocType && matchesTitle;
+            });
+            if (filteredItems.length) {
+              $ctrl.filteredSections.push({ title: title, items: filteredItems });
+            }
+          });
+        }
+      );
+    }
+  };
+});
\ No newline at end of file
diff --git a/tools/api-builder/angular.io-package/index.js b/tools/api-builder/angular.io-package/index.js
index 20bae86567..a0a72dcd29 100644
--- a/tools/api-builder/angular.io-package/index.js
+++ b/tools/api-builder/angular.io-package/index.js
@@ -99,9 +99,9 @@ module.exports = new Package('angular.io', [basePackage, targetPackage, cheatshe
   });
 
   computePathsProcessor.pathTemplates.push({
-    docTypes: ['json-data'],
-    pathTemplate: path.resolve(PUBLIC_PATH, 'resources/js/${id}'),
-    outputPathTemplate: '${path}.json'
+    docTypes: ['api-list-data'],
+    pathTemplate: 'api-list.json',
+    outputPathTemplate: '${path}'
   });
 
   computePathsProcessor.pathTemplates.push({
diff --git a/tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js b/tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js
index 6b241f21b3..b15229fbe8 100644
--- a/tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js
+++ b/tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js
@@ -28,9 +28,9 @@ module.exports = function addJadeDataDocsProcessor() {
       var modules = [];
 
       var appDataDoc = {
-        id: 'app-data',
-        aliases: ['app-data'],
-        docType: 'json-data',
+        id: 'api-list-data',
+        aliases: ['api-list-data'],
+        docType: 'api-list-data',
         data: {}
       };
       extraDocs.push(appDataDoc);
diff --git a/tools/api-builder/angular.io-package/templates/app-data.template.html b/tools/api-builder/angular.io-package/templates/api-list-data.template.html
similarity index 100%
rename from tools/api-builder/angular.io-package/templates/app-data.template.html
rename to tools/api-builder/angular.io-package/templates/api-list-data.template.html