title: AngularJS 1.6.x Dynamically Load Components with html string and ng-if="{{ }}"
body: <p>I am having an issue dynamically loading components with {{}} using Angular 1.6.x</p>
  
  <p>I can load the components dynamically just fine using compile, but the issue I am facing is adding an ng-if={{}} to the html string.</p>
  
  <p>If I go this route it will take what ever vm.page is set to at the time. i.e. 1:</p>
  
  <pre><code>    for (var i = 0; i &lt; vm.wizardPages.length; i++) {
       var newScope = $scope.$new(true, $scope);
       newScope = angular.merge(newScope, vm.wizardPages[i]);
       var html = '&lt;' + vm.wizardPages[i].componentName + ' ng-if="' + 
       vm.page + ' === ' + (i + 1) + '"&gt;&lt;/' + vm.wizardPages[i].componentName 
       + '&gt;';
       var element = $('page');
       element.append($compile(html)(newScope));
  }
  </code></pre>
  
  <p>Above renders:</p>
  
  <pre><code>&lt;service-center-branch-selection ng-if="1 === 1" class="ng-scope ng-isolate-scope"&gt;
     ...
  &lt;/service-center-branch-selection&gt;
  </code></pre>
  
  <p>How can I call compile with {{}} in the string so vm.page is using data binding and can change when vm.page changes value?:</p>
  
  <pre><code>// loop through the data and inject components
  for (var i = 0; i &lt; vm.wizardPages.length; i++) {
      var newScope = $scope.$new(true, $scope);
      newScope = angular.merge(newScope, vm.wizardPages[i]);
      var html = '&lt;' + vm.wizardPages[i].componentName + ' ng-if="{{vm.page}} === ' + (i + 1) + '"&gt;&lt;/' + vm.wizardPages[i].componentName + '&gt;';
      var element = $('page');
      element.append($compile(html)(newScope));
      console.log(newScope);
  }
  </code></pre>
  
  <p>I want the above to work with:</p>
  
  <pre><code>&lt;service-center-branch-selection ng-if="vm.page === 1" class="ng-scope ng-isolate-scope"&gt;
     ...
  &lt;/service-center-branch-selection&gt;
  </code></pre>