title: Angular: Change component template using variables
body: <p>my question is: Is possible to change the component template when the value of a variable changes in the parent controller?
  Here there are two ways that I tried to follow:</p>
  
  <pre><code>var topBarTemplateWithButton = [
  '&lt;section id="filters"&gt;',
  '&lt;div class="pull-left"&gt;',
  '&lt;h1&gt;{{$ctrl.step}}&lt;/h1&gt;',
  '&lt;div class="pull-left pageActionContainer"&gt;',
  '&lt;ng-transclude&gt;&lt;/ng-transclude&gt;',
  '&lt;/div&gt;',
  '&lt;/div&gt;',
  '&lt;/section&gt;'].join(' ')
  
  var topBarTemplateWithoutButton = [
      '&lt;section id="filters"&gt;',
      '&lt;div class="pull-left"&gt;',
      '&lt;h1&gt;{{$ctrl.step}}&lt;/h1&gt;',
      '&lt;/div&gt;',
      '&lt;/section&gt;'].join(' ')
  
  myApp.component('topBar', {
      bindings: {
          step: '&lt;'
      },
      template: this.templateToUse,
      transclude: true,
      controller: function() {
          var me = this;
  
          me.$onInit = function() {
              this.templateToUse = topBarTemplateWithButton;
          }
  
          me.$onChanges = function(changes) {
              if(changes.step.currentValue != "Projects") {
                  this.templateToUse = this.topBarTemplateWithoutButton;
              }else {
  
                  this.templateToUse = topBarTemplateWithButton;
  
              }
          }
      }
  });
  </code></pre>
  
  <p>and</p>
  
  <pre><code>var topBarTemplateWithButton = [
      '&lt;section id="filters"&gt;',
      '&lt;div class="pull-left"&gt;',
      '&lt;h1&gt;{{$ctrl.step}}&lt;/h1&gt;',
      '&lt;div class="pull-left pageActionContainer"&gt;',
      '&lt;ng-transclude&gt;&lt;/ng-transclude&gt;',
      '&lt;/div&gt;',
      '&lt;/div&gt;',
      '&lt;/section&gt;'].join(' ')
  
  var topBarTemplateWithoutButton = [
      '&lt;section id="filters"&gt;',
      '&lt;div class="pull-left"&gt;',
      '&lt;h1&gt;{{$ctrl.step}}&lt;/h1&gt;',
      '&lt;/div&gt;',
      '&lt;/section&gt;'].join(' ')
  
  myApp.component('topBar', {
      bindings: {
          step: '&lt;'
      },
      template: '&lt;div ng-include="$ctrl.templateToUse"/&gt;,
      transclude: true,
      controller: function() {
          var me = this;
  
          me.$onInit = function() {
              this.templateToUse = topBarTemplateWithButton;
          }
  
          me.$onChanges = function(changes) {
              if(changes.step.currentValue != "Projects") {;
                  this.templateToUse = this.topBarTemplateWithoutButton;
              }else {
                  this.templateToUse = topBarTemplateWithButton;
              }
          }
      }
  });
  </code></pre>
  
  <p>Both these two examples don't work. So it's possible to change the template of this component when the value of <code>step</code> changes? Thank you for your help.</p>