Unfortunately, I am not able to create a reproducible snippet for this scenario. It's occurring in a rather complicated codebase, suffice it to say.

I have a component method onClick that sets a flag to true. e.g.

// in the template
<button type='button' ng-click="onClick()"></button>

//javascript

angular.module('myModule')
  .component('MyComponent', {
  ...
  controller: [function(){
    var ctrl = this;
    ctrl.showModal = false;
    ctrl.onClick = function() {
      ctrl.showModal = true;
    }
  }]
})

This flag is used with an ng-if that instantiates another component that $onInit renders a modal. e.g.

//in the template

<my-modal-component ng-if="$ctrl.showModal"></my-modal-component>


//javascript
angular.module('myModule')
  .component('myModalComponent', {
  ...
  controller: [function(){
    // renders third party modal
    var renderModal = function() {}
   
    // makes and returns an api call to get some data as a promise
    var getRelevantData = function(){}


    this.$onInit = function () {
      getRelevantData().then(function(){
        renderModal();
      })
    }
  }]
})

For some crazy reason, myModalComponent actually gets two separate instances (i.e. renders twice, one on top of the other) when the button is clicked. I know there's some ng-if nuances with scope but I'm not using $scope here, and even putting the flag inside an object didnt work.

ng-show with some if checks on rendering the modal sort of works but my data bindings get all screwed up (a method I pass into myModalComponent is defined when ng-show is false but when ng-show changes to true, it's undefined) so I prefer to not go down that rabbit hole if I can; plus, I think ng-if makes much more sense here.

Even more crazy, if I put a $timeout(, 10000) to delay the setting of the flag to 10 seconds on the button click (onClick), the modal still renders once immediately and ten seconds later, another modal renders on top of it.

Admittedly, I try to stay away from the digest cycle, as I know it's something important to know but ironically is kind of an anti-pattern to mess with... So does anyone have any ideas?

I miss React.