fix(fabToolbar): Fix md-direction attribute to be a string instead of…

… expression.

Fix `md-direction` attribute to use the correct scope initialization.

Fixes #3390. Closes #4185.

src/components/fabToolbar/demoBasicUsage/index.html

@@ -12,7 +12,8 @@
     </p>
   </md-content>
 
-  <md-fab-toolbar md-open="demo.isOpen" count="demo.count" md-direction="demo.selectedDirection">
+  <md-fab-toolbar md-open="demo.isOpen" count="demo.count"
+                  md-direction="{{demo.selectedDirection}}">
     <md-fab-trigger class="align-with-text">
       <md-button aria-label="menu" class="md-fab md-primary">
         <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
@@ -55,4 +56,4 @@
       </div>
     </div>
   </md-content>
-</div>
+</div>

src/components/fabToolbar/fabToolbar.js

@@ -79,7 +79,7 @@
       '</div>',
 
       scope: {
-        direction: '=?mdDirection',
+        direction: '@?mdDirection',
         isOpen: '=?mdOpen'
       },
 

src/components/fabToolbar/fabToolbar.spec.js

@@ -14,6 +14,26 @@ describe('<md-fab-toolbar> directive', function() {
     });
   }
 
+  it('applies a class for each direction', inject(function() {
+    build(
+      '<md-fab-toolbar md-direction="{{direction}}"></md-fab-toolbar>'
+    );
+
+    pageScope.$apply('direction = "left"');
+    expect(element.hasClass('md-left')).toBe(true);
+
+    pageScope.$apply('direction = "right"');
+    expect(element.hasClass('md-right')).toBe(true);
+  }));
+
+  it('accepts a string for md-direction', inject(function() {
+    build(
+      '<md-fab-toolbar md-direction="right"></md-fab-toolbar>'
+    );
+
+    expect(element.hasClass('md-right')).toBe(true);
+  }));
+
   it('allows programmatic opening through the md-open attribute', inject(function() {
     build(
       '<md-fab-toolbar md-open="isOpen"></md-fab-toolbar>'