I am trying to make a tour for the first user of my site. It works fine on localhost, but when I upload it to my dev server it doesn't work properly, i.e. the tooltips are not in the specified location. See the following two screenshots:


I think the problem is that the component is not loaded so far, I think the tooltip is being rendered in the middle of the page.
The repository I'm using is here
Code - Controller
$scope.IntroOptions = {
steps:[
{
element: '#step1',
intro: "<b>First Step First: </b>Click here to define structure of your test scripts!!<br/>You can modify this later on any time",
position: 'left'
},
{
element: '#step2',
intro: "Click here to select a folder/test script spreadsheet from google drive.",
position: 'bottom'
}]
,
showStepNumbers: false,
exitOnOverlayClick: false,
exitOnEsc: false,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks!'
};
$scope.ShouldAutoStart = false;
$timeout(function(){
$scope.CallMe();
}, 0);
HTML code -
<div ng-controller="tourController" class="container-narrow">
<div ng-intro-options="IntroOptions" ng-intro-method="CallMe"
ng-intro-oncomplete="CompletedEvent" ng-intro-onexit="ExitEvent"
ng-intro-onchange="ChangeEvent" ng-intro-onbeforechange="BeforeChangeEvent"
ng-intro-onafterchange="AfterChangeEvent"
ng-intro-autostart="ShouldAutoStart">
</div>
</div>
** I tried using angular.element (document) .ready () but did not work.
Things are working now with a timeout of 1000 milliseconds, but I think there should be a better way to do this