AngularJS: directive adds object to $scope but undefined in controller

Question

I'm new to AngularJS. I wanna use angular-bootstrap-tour to create a walk-through. It says:

The tour directive creates a wrapper that contains all tour steps and adds the tour object to the scope.

So I have this code in my view:

<div tour placement="top">
   <div tour-step order="0" title="Main Menu" content="This is the main menu." placement="bottom">
</div>

And now in my controller, I wanna use this code to start the tour as the page loads:

$scope.tour.restart(tour);

But it says: $scope.tour is undefined! and when I add the code below to my view, the buttons start the tour! How tour is defined in view but not in controller's $scope ?

<button class="btn" ng-click="tour.restart(true)">Start Tour</button> 

Answer 1

Add Code in your js file like

    function execute(moduleType) {
        if(moduleType) {
           var tour = new Tour({orphan: false});
           tour.addSteps(setRoute(moduleType));
           tour.init();
           tour.restart();
           tour.start(true);
        }
    }

Add Code in your HTML file like

<button class="btn" ng-click="execute(true)">Start Tour</button>