How to add Intro on Angular bootstrap modal .

[Prem Pal]

I am using angular and angular bootstrap modal and trying to add Intro On Modal.

<script type="text/ng-template" id="holidayCalender.html">
    <div class="modal-header" data-ng-init="callIntro();">
        <h3 class="modal-title">Add a Holiday Calender</h3>
    </div>
    <div class="modal-body">
        <form name="addHolidayCalender">
            <div class="row">
                <div class="col-sm-2" id="step1">
                    <label>
                        Holiday Calender Name
                    </label>
                </div>
                <div class="col-sm-4">
                    <input name="calenderName" type="text" data-ng-model="calender.name">
                </div>
                
            </div>
            <br>
        </form>
    </div>
    
</script>

$scope.callIntro = function(){

   var intro = introJs();

    intro.setOptions({
        steps: [
            {   element: document.querySelector('#step1'),
                intro: "Modal Element step1!"
            },
            
        ]
    });

    intro .start();

};

How do I get it to focus on that modal?