title: angular 1.5 component / default value for @ binding
body: <p>Is there any way to specify the default value for an @ binding of a component.</p>
  
  <p>I've seen instruction on how to do it with directive: <a href="https://stackoverflow.com/questions/31839435/how-to-set-a-default-value-in-an-angular-directive-scope">How to set a default value in an Angular Directive Scope?</a></p>
  
  <p>But component does not support the compile function.</p>
  
  <p>So, I have component like this:</p>
  
  <pre><code>{
    name: 'myPad',
    bindings   : {layout: '@'}
  }
  </code></pre>
  
  <p>I want to free users of my component from having to specify the value of the 'layout' attribute. So..., this:</p>
  
  <pre><code>&lt;my-pad&gt;...&lt;/my-pad&gt;
  </code></pre>
  
  <p>instead of this:</p>
  
  <pre><code>&lt;my-pad layout="column"&gt;...&lt;/my-pad&gt;
  </code></pre>
  
  <p>And... this 'layout' attribute is supposed to be consumed by angular-material JS that 'm using, so it needs to be bound before the DOM is rendered (so the material JS can pick it up &amp; add the corresponding classes to the element).</p>
  
  <p>update, some screenshots to clarify the situation:</p>
  
  <p>Component definition:</p>
  
  <pre><code>{
    name : 'workspacePad',
    config : {
      templateUrl: 'src/workspace/components/pad/template.html',
      controller : controller,
      bindings   : {
        actions: '&lt;', actionTriggered: '&amp;', workspaces: '&lt;', title: '@',
        flex: '@', layout: '@'
      },
      transclude: {
        'workspaceContent': '?workspaceContent'
      }
    }
  }
  </code></pre>
  
  <p>Component usage:</p>
  
  <pre><code>&lt;workspace-pad flex layout="column" title="Survey List" actions="$ctrl.actions"
    action-triggered="$ctrl.performAction(action)"&gt;
    &lt;workspace-content&gt;
      &lt;div flex style="padding-left: 20px; padding-right: 20px; "&gt;
        &lt;p&gt;test test&lt;/p&gt;
      &lt;/div&gt;
    &lt;/workspace-content&gt;
  &lt;/workspace-pad&gt;
  </code></pre>
  
  <p>I want to make that "flex" and "layout" in the second screenshot (usage) optionals.</p>
  
  <hr>
  
  <h2>UPDATE</h2>
  
  <p>My "solution" to have this in the constructor of my component:</p>
  
  <pre><code>this.$postLink = function() {
    $element.attr("flex", "100");
    $element.attr("layout", "column");
    $element.addClass("layout-column");
    $element.addClass("flex-100");
  }
  </code></pre>
  
  <p>I wish I didn't have to write those last 2 lines (addClass)... but well, since we don't have link and compile in component.... I think I should be happy with it for now.</p>