docs: function setPos(){
            var currentStep = scope.joyride.config.steps[scope.joyride.current];
  
            $timeout(function(){
  
              removeClassByPrefix(joyrideContainer, "jr_pos_");
              var step = scope.joyride.config.steps[scope.joyride.current];
              
  
            // If step type equals 'element' set position and styles
            if (step.type == 'element' && document.querySelector(step.selector)) {
              joyrideContainer.removeAttribute('style');
              angular.element(joyrideContainer).addClass('jr_element');
              
  
              if (document.querySelector(".jr_target")) {
                angular.element(document.querySelector(".jr_target")).removeClass('jr_target');  
              }
              
              var jrElement = angular.element(document.querySelector(step.selector));
              var position = getElementOffset(jrElement[0]);
              var window_width = window.innerWidth;
  
              var jrWidth = joyrideContainer.offsetWidth;
              var targetWidth = jrElement[0].offsetWidth;
              
              var jrHeight = joyrideContainer.clientHeight;
              var targetHeight = jrElement[0].clientHeight;
                  
              jrElement.addClass('jr_target');
  
              /********************************************
              Check where the step should be positioned then 
              change the position property accordingly
              ********************************************/
              var placement = step.placement || 'bottom';
              if (step.responsive && window_width < step.responsive.breakpoint) {
                placement = step.responsive.placement || 'bottom';
              }
  
              angular.element(joyrideContainer).addClass('jr_pos_'+placement);
  
              if (currentStep.appendToBody){
                if (placement === 'top' || placement === 'bottom') {
                  if (placement === 'top') {
                    position.top -= jrHeight + 20;
                  }
  
                  else {
                    position.top += targetHeight + 20;
                  }
                  
  
                  position.left = ((position.left + targetWidth/2) - jrWidth/2 );
                  
                }
  
                else{
                  
                  
                  position.top = ((position.top + targetHeight/2) - jrHeight/2 );
                  if (placement === 'left') {
                    position.left -= jrWidth + 20;
  
                  }
  
                  else {
                    position.left += targetWidth + 20;
                  }
  
                }
  
                // Set joyride position
                joyrideContainer.style.left = position.left + 'px';
                joyrideContainer.style.top = position.top + 'px';
                joyrideContainer.style.right = 'auto';
                joyrideContainer.style.bottom = 'auto';
                joyrideContainer.style.transform = 'none';
                
              
              }
  
              /** 
              Check if Joyride is out of bounds and adjust position
              */
              
              var joyridePosition = getElementOffset(joyrideContainer);
  
              /**
              Handle top/bottom cases
              */
              if(placement !== "left" && placement !== "right"){
  
                if(joyridePosition.left < 0){
                  var triangle = document.querySelector(".jr_container .triangle");
                  triangle.style.left = (targetWidth/2 - triangle.offsetWidth/2)  + 'px';
                  triangle.style.right = "auto";
                  joyrideContainer.style.left = 0;
                  joyrideContainer.style.right = "auto";
                }
  
                else if((joyridePosition.left + jrWidth) > window_width){
                  var tempPos = joyridePosition.left + (jrWidth/2)
                  var triangle = document.querySelector(".jr_container .triangle");
                  triangle.style.right = (targetWidth/2 - triangle.offsetWidth/2)  + 'px';
                  triangle.style.left = "auto";
                  joyrideContainer.style.left = "auto";
                  joyrideContainer.style.right = 0;
                }
              }
              
  
              /**
              Handle left/right cases
              */
              else{
  
                if(joyridePosition.top < 0){
                  var triangle = document.querySelector(".jr_container .triangle");
                  var trianglePos = targetHeight/2 - triangle.offsetHeight/2;
                  triangle.style.top = trianglePos < 0 ? 0 + "px" : trianglePos + "px";
  
                  triangle.style.bottom = "auto";
                  joyrideContainer.style.top = 0;
                  joyrideContainer.style.transform = "none";
                }
  
              }
  
              // Scroll to element if scroll is enabled
                if (step.scroll !== false) {
                  if (placement === 'bottom') {
                    scroll_pos = position.top - targetHeight;
                  }
                  else if(placement === 'top'){
                    scroll_pos = position.top - jrHeight;
                  }
                  else{
                    if(targetHeight < jrHeight){
                      scroll_pos = position.top -  (jrHeight - targetHeight) /2;
                    }
                  }
                  
                  scrollToElement(scroll_pos);
                }
            }
  
  
            // If step isn't an element
            else{
              angular.element(joyrideContainer).removeClass('jr_element');
              if (document.querySelector(".jr_target")) {
                angular.element(document.querySelector(".jr_target")).removeClass('jr_target');  
              }
              joyrideContainer.style.left = '';
              joyrideContainer.style.top = getScroll(placement, joyrideContainer) + 100 + 'px';
            }
        });
  
          }