diff --git a/Gruntfile.js b/Gruntfile.js
index 0c190e7413..da09aff756 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -10,6 +10,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-html2js');
   grunt.loadNpmTasks('grunt-karma');
   grunt.loadNpmTasks('grunt-conventional-changelog');
+  grunt.loadNpmTasks('grunt-ngdocs');
 
   // Project configuration.
   grunt.util.linefeed = '\n';
@@ -147,6 +148,25 @@ module.exports = function(grunt) {
         'grunt version:minor:"SNAPSHOT"',
         'git commit package.json -m "chore(): Starting v%version%"'
       ]
+    },
+    ngdocs: {
+      options: {
+        dest: 'dist/docs',
+        scripts: [
+          'angular.js', 
+          '<%= concat.dist_tpls.dest %>'
+        ],
+        styles: [
+          'docs/css/style.css'
+        ],
+        navTemplate: 'docs/nav.html',
+        title: 'ui-bootstrap',
+        html5Mode: false
+      },
+      api: {
+        src: ["src/**/*.js", "src/**/*.ngdoc"],
+        title: "API Documentation"
+      }
     }
   });
 
diff --git a/docs/css/style.css b/docs/css/style.css
new file mode 100644
index 0000000000..0bbd3ad262
--- /dev/null
+++ b/docs/css/style.css
@@ -0,0 +1,21 @@
+.bs-docs-social {
+    margin-top: 1em;
+    padding: 15px 0;
+    text-align: center;
+    background-color: rgba(245,245,245,0.3);
+    border-top: 1px solid rgba(255,255,255,0.3);
+    border-bottom: 1px solid rgba(221,221,221,0.3);
+}
+.bs-docs-social-buttons {
+  position: absolute;
+  top: 8px;
+    margin-left: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+}
+.bs-docs-social-buttons li {
+    list-style: none;
+    display: inline-block;
+    line-height: 1;
+}
diff --git a/docs/nav.html b/docs/nav.html
new file mode 100644
index 0000000000..078fd91200
--- /dev/null
+++ b/docs/nav.html
@@ -0,0 +1,13 @@
+<div class="btn-toolbar btn-group pull-right">
+  <a class="btn btn-small btn-primary" href="https://github.com/angular-ui/bootstrap/tree/gh-pages">
+    <i class="icon-download-alt icon-white"></i> Download <small>(<%= pkg.version%>)</small>
+  </a>
+</div>
+<div class="margin: 10px;"></div>
+<ul class="nav pull-right bs-docs-social-buttons">
+  <li>
+  <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=watch&count=true"
+    allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
+  </li>
+</ul>
+
diff --git a/misc/changelog.tpl.md b/misc/changelog.tpl.md
deleted file mode 100644
index f311f47c54..0000000000
--- a/misc/changelog.tpl.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# <%= version%> (<%= today%>)
-
-## Features
-
-<% _(changelog.feat).forEach(function(changes, component) { %>
-- **<%= component%>:**
-  <% changes.forEach(function(change) { %>
-  - <%= change.msg%> ([<%= change.sha1%>](https://github.com/angular-ui/bootstrap/commit/<%= change.sha1%>))
-  <% }) %>
-<% }) %>
-
-## Bug Fixes
-
-<% _(changelog.fix).forEach(function(changes, component) { %>
-- **<%= component%>:**
-  <% changes.forEach(function(change) { %>
-  - <%= change.msg%> ([<%= change.sha1%>](https://github.com/angular-ui/bootstrap/commit/<%= change.sha1%>))
-  <% }) %>
-<% }) %>
-
-## Breaking Changes
-
-<% _(changelog.breaking).forEach(function(changes, component) { %>
-- **<%= component%>:**
-  <% changes.forEach(function(change) { %>
-  <%= change.msg%>
-  <% }) %>
-<% }) %>
diff --git a/package.json b/package.json
index f74b6c6692..d063fd1a0b 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "grunt-html2js": "~0.1.3",
     "grunt-karma": "~0.4.4",
     "semver": "~1.1.4",
-    "shelljs": "~0.1.4"
+    "shelljs": "~0.1.4",
+    "grunt-ngdocs": "git://github.com/m7r/grunt-ngdocs"
   }
 }
diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js
index 3971e30331..2a0a620694 100644
--- a/src/tabs/tabs.js
+++ b/src/tabs/tabs.js
@@ -1,3 +1,12 @@
+
+/**
+ * @ngdoc overview
+ * @name ui.bootstrap.tabs
+ *
+ * @description
+ * AngularJS version of the tabs directive.
+ */
+
 angular.module('ui.bootstrap.tabs', [])
 
 .directive('tabs', function() {
@@ -37,6 +46,31 @@ function TabsetCtrl($scope, $element) {
   };
 }])
 
+/**
+ * @ngdoc directive
+ * @name ui.bootstrap.tabs.directive:tabset
+ * @restrict EA
+ *
+ * @description
+ * Tabset is the outer container for the tabs directive
+ *
+ * @param {boolean=} vertical Whether or not to use vertical styling for the tabs.
+ *
+ * @example
+<example module="ui.bootstrap">
+  <file name="index.html">
+    <tabset>
+      <tab heading="Vertical Tab 1"><b>First</b> Content!</tab>
+      <tab heading="Vertical Tab 2"><i>Second</i> Content!</tab>
+    </tabset>
+    <hr />
+    <tabset vertical="true">
+      <tab heading="Vertical Tab 1"><b>First</b> Vertical Content!</tab>
+      <tab heading="Vertical Tab 2"><i>Second</i> Vertical Content!</tab>
+    </tabset>
+  </file>
+</example>
+ */
 .directive('tabset', function() {
   return {
     restrict: 'EA',
@@ -51,6 +85,86 @@ function TabsetCtrl($scope, $element) {
   };
 })
 
+/**
+ * @ngdoc directive
+ * @name ui.bootstrap.tabs.directive:tab
+ * @restrict EA
+ *
+ * @param {string=} heading The visible heading, or title, of the tab. Set HTML headings with {@link ui.bootstrap.tabs.directive:tabHeading tabHeading}.
+ * @param {string=} select An expression to evaluate when the tab is selected.
+ * @param {boolean=} active A binding, telling whether or not this tab is selected.
+ * @param {boolean=} disabled A binding, telling whether or not this tab is disabled.
+ *
+ * @description 
+ * Creates a tab with a heading and content. Must be placed within a {@link ui.bootstrap.tabs.directive:tabset tabset}.
+ *
+ * @example
+<example module="ui.bootstrap">
+  <file name="index.html">
+    <div ng-controller="TabsDemoCtrl">
+      <button class="btn btn-small" ng-click="items[0].active = true">
+        Select item 1, using active binding
+      </button>
+      <button class="btn btn-small" ng-click="items[1].disabled = !items[1].disabled">
+        Enable/disable item 2, using disabled binding
+      </button>
+      <br />
+      <tabset>
+        <tab heading="Tab 1">First Tab</tab>
+        <tab select="alertMe()">
+          <tab-heading><i class="icon-bell"></i> Alert me!</tab-heading>
+          Second Tab, with alert callback and html heading!
+        </tab>
+        <tab ng-repeat="item in items"
+          heading="{{item.title}}"
+          disabled="item.disabled"
+          active="item.active">
+          {{item.content}}
+        </tab>
+      </tabset>
+    </div>
+  </file>
+  <file name="script.js">
+    function TabsDemoCtrl($scope) {
+      $scope.items = [
+        { title:"Dynamic Title 1", content:"Dynamic Item 0" },
+        { title:"Dynamic Title 2", content:"Dynamic Item 1", disabled: true }
+      ];
+
+      $scope.alertMe = function() {
+        setTimeout(function() {
+          alert("You've selected the alert tab!");
+        });
+      };
+    };
+  </file>
+</example>
+ */
+
+/**
+ * @ngdoc directive
+ * @name ui.bootstrap.tabs.directive:tabHeading
+ * @restrict EA
+ *
+ * @description
+ * Creates an HTML heading for a {@link ui.bootstrap.tabs.directive:tab tab}. Must be placed as a child of a tab element.
+ *
+ * @example
+<example module="ui.bootstrap">
+  <file name="index.html">
+    <tabset>
+      <tab>
+        <tab-heading><b>HTML</b> in my titles?!</tab-heading>
+        And some content, too!
+      </tab>
+      <tab>
+        <tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
+        That's right.
+      </tab>
+    </tabset>
+  </file>
+</example>
+ */
 .directive('tab', ['$parse', '$http', '$templateCache', '$compile',
 function($parse, $http, $templateCache, $compile) {
   return {