Monaco editor does not work in angular tab

Question

I am using Monaco editor with angular 1.6, In my UI I have different tabs(as in [this][1] example) pointing to different html page.

[1]: https://www.w3schools.com/howto/howto_js_tabs.asp I am using Monaco editor, but the problem is it is getting applied(integrated) to the items(text/textbox) only the first tab , if I apply in in other tab other than the first it is not showing up there , this is the bit of my code just to get an idea.

angular.module('sample').config(['$routeProvider', function ($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: '/',
    controller: 'MainCtrl'
  }).when('/sample1', {
    templateUrl: '/sample1',
    controller: 'sample1Ctrl'
  }).when('/sample2', {
    templateUrl: '/sample2',
    controller: 'sample2Ctrl',
  }).when('/sample3', {
    templateUrl: '/sample3',
    controller: 'sample3Ctrl'
  }).when('/sample4', {
    templateUrl: '/sample4',
    controller: 'sample4Ctrl'
  }).otherwise({
    redirectTo: '/'
  });
}]);    
angular.module('sample').controller('TabCtrl', function ($scope) {
      $scope.tabs = [
        {
          slug: 'sample1',
          title: "Register sample1",
          content: "sample1"
        },{
          slug: 'sample2',
          title: "Register sample2",
          content: 'sample2'
        },
        {
          slug: 'sample3',
          title: "Get sample3",
          content: "sample3"
        },
        {
          slug: 'sample4',
          title: "Register sample4",
          content: "sample4"
        }
      ];
    });

this is how I am using Monaco editor in the controller

$scope.experimentConfigEditor = monaco.editor.create(document.getElementById('experimentText'), {
    value: '',
    language: 'json',
    minimap: {
      enabled: false
    }
  });
  $scope.newExperimentConfigEditor = monaco.editor.create(document.getElementById('newExperimentText'), {
    value: '',
    language: 'json',
    minimap: {
      enabled: false
    }
  });
  $scope.getConfigFromDatalensTextEditor = monaco.editor.create(document.getElementById('getText'), {
    value: '',
    language: 'json',
    minimap: {
      enabled: false
    }
  });

and this is the sample html file

<div id="experimentText"  name="experimentText" style="width:600px;height:200px;border:1px solid grey" ng-show="experimentText" ng-model="formData. experimentText"></div>

So If I use the controller with Monaco in the first tab then only Monaco is getting applied otherwise it's not working the html elements are coming as an simple elements without Monaco editor in UI.