Page title rendered according to section

lib/app/index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" type="text/css" href="{{{appRoot}}}/css/app.css">
   <link rel="stylesheet" type="text/css" href="{{{appRoot}}}/styleguide.css">
   <link rel="stylesheet" type="text/css" href="{{{appRoot}}}/styleguide_pseudo_styles.css">
-  <title>{{title}}</title>
+  <title ng-bind="$root.pageTitle"></title>
   {{{extraHead}}}
   {{#filesConfig}}
   <script type="text/javascript">

lib/app/js/app.js

@@ -21,8 +21,16 @@ angular.module('sgApp', [
       .state('app.index.overview', {
         url: '/overview',
         templateUrl: 'overview.html',
-        controller: function($rootScope) {
+        controller: function($rootScope, Styleguide) {
           $rootScope.currentSection = 'overview';
+
+          $rootScope.$watch(function() {
+            return Styleguide.config.data;
+          }, function(newVal, oldVal) {
+            if (newVal) {
+              $rootScope.pageTitle = newVal.title;
+            }
+          });
         }
       })
       .state('app.index.section', {

lib/app/js/controllers/sections.js

@@ -14,6 +14,30 @@ angular.module('sgApp')
       return !/([0-9]\.)/.test(section.reference);
     }
 
+    $rootScope.$watch(function() {
+      return Styleguide.sections.data;
+    }, function(newVal, oldVal) {
+      parseStateHeading($scope.currentSection);
+    });
+
+    $rootScope.$watch(function() {
+      return Styleguide.config.data;
+    }, function(newVal, oldVal) {
+      parseStateHeading($scope.currentSection);
+    });
+
+    function parseStateHeading(section) {
+      if (section === 'all' && typeof Styleguide.config.data !== 'undefined') {
+        $rootScope.pageTitle = 'All sections - ' + Styleguide.config.data.title;
+      } else if (typeof Styleguide.sections.data !== 'undefined') {
+        for (var i = 0; i < Styleguide.sections.data.length; i++) {
+          if (Styleguide.sections.data[i].reference == section) {
+            $rootScope.pageTitle = Styleguide.sections.data[i].header + ' - ' + Styleguide.config.data.title
+          }
+        };
+      }
+    }
+
     // Check section level (main/sub/sub-sub/sub-sub-sub)
     $scope.getLevel = function(section) {
       if (/([0-9]\.[0-9]\.[0-9]\.)/.test(section.reference)) {

lib/app/views/main.html

@@ -8,7 +8,6 @@ <h1 class="sg">{{ config.data.title }}</h1>
     </div>
   </div>
 </header>
-
 <div class="sg wrapper" ng-class="isNavCollapsed ? 'collapsed' : ''">
   <div class="sg side-nav-toggle"
     ng-click="isNavCollapsed = !isNavCollapsed">

test/structure.js

@@ -72,10 +72,6 @@ describe('index.html', function() {
     expect(indexHtml).to.be.an('object');
   });
 
-  it('should contain correct title', function() {
-    expect(indexHtml.contents.toString()).to.contain('<title>Test Styleguide</title>');
-  });
-
   it('should contain CSS style passed as parameter', function() {
     expect(indexHtml.contents.toString()).to.contain('<link rel="stylesheet" type="text/css" href="your/custom/style.css">');
   });