Q:

AngularJS 1.6.x Dynamically Load Components with html string and ng-if="{{ }}"

I am having an issue dynamically loading components with {{}} using Angular 1.6.x
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.
If I go this route it will take what ever vm.page is set to at the time. i.e. 1:
    for (var i = 0; i < vm.wizardPages.length; i++) {
     var newScope = $scope.$new(true, $scope);
     newScope = angular.merge(newScope, vm.wizardPages[i]);
     var html = '<' + vm.wizardPages[i].componentName + ' ng-if="' + 
     vm.page + ' === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName 
     + '>';
     var element = $('page');
     element.append($compile(html)(newScope));
}

Above renders:
<service-center-branch-selection ng-if="1 === 1" class="ng-scope ng-isolate-scope">
   ...
</service-center-branch-selection>

How can I call compile with {{}} in the string so vm.page is using data binding and can change when vm.page changes value?:
// loop through the data and inject components
for (var i = 0; i < vm.wizardPages.length; i++) {
    var newScope = $scope.$new(true, $scope);
    newScope = angular.merge(newScope, vm.wizardPages[i]);
    var html = '<' + vm.wizardPages[i].componentName + ' ng-if="{{vm.page}} === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName + '>';
    var element = $('page');
    element.append($compile(html)(newScope));
    console.log(newScope);
}

I want the above to work with:
<service-center-branch-selection ng-if="vm.page === 1" class="ng-scope ng-isolate-scope">
   ...
</service-center-branch-selection>

A:

Changed to "currentPage":
// loop through the data and inject components
for (var i = 0; i < vm.wizardPages.length; i++) {
    var newScope = $scope.$new(true, $scope);
    newScope = angular.merge(newScope, vm.wizardPages[i]);
    var html = '<' + vm.wizardPages[i].componentName + ' ng-if="currentPage === ' + (i + 1) + '"></' + vm.wizardPages[i].componentName + '>';
    var element = $('page');
    element.append($compile(html)(newScope));
    console.log(newScope);
}

Add 'currentPage' binding to component so available for new scope:
app.component("wizard", { 
     template: require('./wizard.component.html'), 
     controllerAs: "vm", 
     controller: wizardController, 
     bindings: { 
          breadcrumbs: '<', 
          wizardPages: '<',
          currentPage: '<'
     } 
});

Add variable input to markup
<wizard breadcrumbs="vm.breadcrumbs" wizard-pages="vm.wizardPages" current-page="vm.page"> 

...

</wizard>

This is untested, but hopefully gives you the idea.  Also, if the isolate scope has the ability to change the current page then you will need to update it to a two-way binding of course.  

