title: Angular UI-Router breaks Angular Material Flex and md-content
body: <p>everybody.</p>
  
  <p>I am using the following:</p>
  
  <p>angular: 1.6.1,
  angular-material: 1.1.3,
  angular-ui-router: 1.0.0-rc.1</p>
  
  <p>All my views are built using components and I am routing them with the UI-Router 1.x component syntax:</p>
  
  <pre><code>$stateProvider
  
      .state('main', {
              url: '/main',
              component: 'main',
          })
  </code></pre>
  
  <p>For the sake of completeness, my components are laid out as follows:</p>
  
  <pre><code>angular
  .module('app.main')
  .component('main', {
      templateUrl: '/modules/main/main.html',
      controller: MainCtrl,
  })
  
  MainCtrl.$inject = [];
  
  function MainCtrl (){
  
  }
  </code></pre>
  
  <p>My index.html is as follows:</p>
  
  <pre><code>&lt;body ng-app="app" layout="column" ng-cloak&gt;
  
  &lt;md-toolbar layout="row" layout-align="center center"&gt;
      &lt;h1&gt;Site Title&lt;/h1&gt;
  &lt;/md-toolbar&gt;
  
  &lt;div layout="column" flex ui-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My view for the main component is irrelevant at this point as the problem starts here. If, for example, my view for main.html is as follows:</p>
  
  <pre><code>&lt;div layout="row" flex&gt;
      Content
  &lt;/div&gt;
  </code></pre>
  
  <p>The div will NOT flex. If, however, it is simply added in place of the ui-view in the parent, it will flex as normal.</p>
  
  <pre><code>&lt;body ng-app="app" layout="column" ng-cloak&gt;
  
  &lt;md-toolbar layout="row" layout-align="center center"&gt;
      &lt;h1&gt;Site Title&lt;/h1&gt;
  &lt;/md-toolbar&gt;
  
  &lt;div layout-align="column" flex&gt;
      Content (THIS WORKS FINE!)
  &lt;/div&gt;
  </code></pre>
  
  <p>Both contain the same attributes in the inspector apart from the usual differences in using ui-view.</p>
  
  <p>This also seems to be causing problems with md-content, which will only scroll if it is the element in the parent that contains the ui-view. Any nested md-contents will not scroll.</p>
  
  <p>I have also tried using the original ui-router way of routing to controllers and templates which was the norm before the .component syntax.</p>
  
  <p>There is a similar problem listed here: 
  <a href="https://stackoverflow.com/questions/40982683/angular-material-layout-breaks-when-using-ui-router">Angular Material layout breaks when using UI-Router</a></p>
  
  <p>It seems that this gentleman's solution was to abandon UI-Router and use ng-route. I really don't want to move away from UI-Router and am considering completely abandoning Angular-Material but would really prefer to avoid that.</p>
  
  <p>Can anybody please help out with this?</p>