fix(demo): observe interpolated docs-demo attributes + fix layout alignment interactive demo

Fixes #6564 Fixes #6361 Fixes #6319

  Closes #6567

Author: devversion

docs/app/js/demo.js

@@ -3,7 +3,7 @@ DocsApp
 .directive('layout', function() { return angular.noop; })
 .directive('docsDemo', [
   '$mdUtil',
-function($mdUtil) {
+function() {
   return {
     restrict: 'E',
     scope: true,
@@ -14,13 +14,23 @@ function($mdUtil) {
     bindToController: true
   };
 
-  function DocsDemoCtrl($scope, $element, $attrs, $interpolate, codepen) {
+  function DocsDemoCtrl($scope, $element, $attrs, codepen) {
     var self = this;
 
     self.interpolateCode = angular.isDefined($attrs.interpolateCode);
-    self.demoId = $interpolate($attrs.demoId || '')($scope.$parent);
-    self.demoTitle = $interpolate($attrs.demoTitle || '')($scope.$parent);
-    self.demoModule = $interpolate($attrs.demoModule || '')($scope.$parent);
+
+    $attrs.$observe('demoTitle', function(value) {
+      self.demoTitle = value;
+    });
+
+    $attrs.$observe('demoId', function(value) {
+      self.demoId = value;
+    });
+
+    $attrs.$observe('demoModule', function(value) {
+      self.demoModule = value;
+    });
+
     self.files = {
       css: [], js: [], html: []
     };

docs/app/partials/layout-alignment.tmpl.html

@@ -23,7 +23,7 @@
             <td>layout-align</td>
             <td>Sets default alignment unless overridden by another breakpoint.</td>
           </tr>
-    <tr>
+          <tr>
            <td>layout-align-xs</td>
            <td>width &lt; <b>600</b>px</td>
          </tr>
@@ -67,20 +67,18 @@
    Below is an interactive demo that lets you explore the visual results of the different settings:
   </p>
 
-  <section class="layout-panel-parent">
-    <div >
-      <docs-demo demo-title='layout="{{layoutDemo.direction}}" &nbsp; &nbsp; &nbsp; layout-align="{{layoutAlign()}}"'
-                 class="small-demo colorNested" interpolate-code="true">
-        <demo-file name="index.html">
-          <div layout="{{layoutDemo.direction}}" layout-align="{{layoutAlign()}}">
-            <div>one</div>
-            <div>two</div>
-            <div>three</div>
-          </div>
-        </demo-file>
-      </docs-demo>
-    </div>
-  </section>
+  <div>
+    <docs-demo demo-title='layout="{{layoutDemo.direction}}" &nbsp; &nbsp; &nbsp; layout-align="{{layoutAlign()}}"'
+               class="small-demo colorNested" interpolate-code="true">
+      <demo-file name="index.html">
+        <div layout="{{layoutDemo.direction}}" layout-align="{{layoutAlign()}}">
+          <div>one</div>
+          <div>two</div>
+          <div>three</div>
+        </div>
+      </demo-file>
+    </docs-demo>
+  </div>
 
   <div layout="column" layout-gt-sm="row" layout-align="space-around">