Rotate screen must be synced with rendering a certain directive

I have a certain directive A, that shows other HTML elements according to the width that the directive has. That is the directive will be rendered, then the logic will calculate the real width for this directive then it will set other HTML elements according to that width. So EVERY HTML elements/directive must be rendered before rendering the directive since they effect on the width of the directive.

The directive first is viewed in a state where the screen is in portrait mode. When clicking on this view, the view of this directive must be shown while the screen is in the landscape. I used Cordova plugin to rotate the screen. My problem is that sometimes the directive takes the width of itself as the screen would in portrait. I am struggling to sync between the rotation and directive.

The scenario is going like this:

  1. In state V1, the directive A is shown.
  2. When clicking on directive A, the screen will rotate and it will rebuild the directive A.
  3. (Problem) Sometimes the directive A shows the other elements that are built according to the width of directive A as it would be in portrait mode.
  4. When going back to view V1, the screen will rotate (to portrait mode) then rebuild the directive A
    5.(Problem) Sometimes the directive A shows the other elements that are build according to the width of directive A as it would be in landscape mode.

I used the following code to sync between them but it does not work.

----> In view A1:

		$scope.$on('$ionicView.afterEnter', () => {
`// Now render the directive A. This is supposed to make sure that all DOM objects are rendred and the view is stable`
			this.isDocumentRendered = true;
		
		});

–> In the other view (landscape mode)

$scope.$on('$ionicView.afterEnter',  () => {

  screen.lockOrientation('landscape');
  this.renderDierctive = true;
});

$scope.$on('$ionicView.afterLeave',  () => {
  screen.lockOrientation('portrait');
});

What am I missing here?