layout: flex class addition fails when including a binding in the class attribute

[larqitos]

Actual Behavior:

• What is the issue? I discovered this recently when I upgraded my project to the latest build of material. Previously this worked and now it doesn't appear to be working. Here is the issue.

When I include a binding in say the class of an element and a flex attribute. The framework fails to apply the appropriate flex classes.

Below is the markup simplified with just a string to be placed into the class. If I use a property in the controller class the result is the same.

<a flex="100" class="formState-{{'current'}}"
         ng-click="form.nextState($event)">
          <div class="navItem" flex layout="row">
            <div class="orb first">
              <span hide show-gt-sm class="label">Project Details</span>
            </div>
            <div flex class="line">&nbsp;</div>
          </div>
        </a>

Here is what is generated by the framework.

<a flex="100" class="formState-current" ng-click="form.nextState($event)">
          <div class="navItem layout-row flex" flex="" layout="row">
            <div class="orb first">
              <span hide="" show-gt-sm="" class="label hide show-gt-sm">Project Details</span>
            </div>
            <div flex="" class="line flex">&nbsp;</div>
          </div>
        </a>

Notice that the flex class of flex-100 was not added in the generated output.

• What is the expected behavior? : the framework should add the appropriate flex class to the element.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/anon/pen/WxkvZa
• Details: : A work around that I discovered was that if I instead use ng-class like so everything works as expected.

<a flex="100" ng-class="'formState-current'"
         ng-click="form.nextState($event)">
          <div class="navItem" flex layout="row">
            <div class="orb first">
              <span hide show-gt-sm class="label">Project Details</span>
            </div>
            <div flex class="line">&nbsp;</div>
          </div>
        </a>

Once again I am simplifying this example by including basic strings but in my actual code I am using properties that exist in my controller.

This same code worked just fine in Material version 1.0.9

Angular Versions: *

• Angular Version: 1.5.7
• Angular Material Version:v1.1.0-rc4-master-f9738f5

Additional Information:

• Browser Type: Chrome
• Browser Version: Version 51.0.2704.103 m
• OS: Windows 10
• Stack Traces: