title: Bootstrap-Tour with angularJS
body: <p>I am currently working on a project where I have to show a tour on the page.</p>
  
  <p>I took a look at Bootstrap-Tour and it was not so bad. I am working in angluarJS controllers. So I create a Tour, add some steps to it and create a button which fire off StartTour() function in AngularJS controller: </p>
  
  <pre><code>var t = new Tour({container: "#main",
      backdrop: false,
      debug:true,
      orphan: true
  });
  
  t.addStep({
      element: "#content123",
      title: "Title123",
      content: "Content123"
  });
  
  t.addSteps(
          [
    {
      element: ".message.message-1", // element selector to show the popover next to;
      title: "Welcome to my tour!",
      content: "We're going to make this quick and useful."
    },
    {
      element: ".message.message-2",
      title: "Let's finish this thing off with a bang.",
      content: "Boom, bang, bam!"
    }
  ]);
  // Initialize method on the Tour class. Get's everything loaded up and ready to go.
  
  
  $scope.StartTour = function(){
  //  t.init();
  
      t.start(true);
      console.log(t);
      console.log("start!!");
  } 
  </code></pre>
  
  <p>The wall I am facing right now is, that if I don't call orphan:true when I am creating New Tour nothing happens when I click the button. How do I get around this problem? Maybe some of the Angular people worked with this tool? later on, I want to pack it inside a directive. </p>