title: Not able to access $scope property outside AngularJS controller in animation function
body: <p><a href="https://i.stack.imgur.com/4DCeO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4DCeO.png" alt="enter image description here"></a>
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module("modalApp", ['ngAnimate', "ngMaterial", "ngMessages"])
      .controller('modalCtrl', function ($scope) {
    $scope.direction = 'left';
          $scope.currentIndex = 0;
    $scope.init = true;
    $scope.initWizard = function() {
     if($scope.init) { 
      $scope.setCurrentIndex(0); 
     } 
     $scope.init = false;  
    }
  
          $scope.setCurrentIndex = function (index) {
              $scope.currentIndex = index;
          }
    
          $scope.isCurrentIndex = function (index) {
              return $scope.currentIndex === index;
          }
  
          $scope.nextModalStep = function () {
              $scope.direction = 'left';
              if($scope.currentIndex &lt; $scope.modalSteps.length - 1) {
      ++$scope.currentIndex;
     } 
          }
  
          $scope.prevModalStep = function () {
              $scope.direction = 'right';
              if($scope.currentIndex &gt; 0) {
      --$scope.currentIndex;
     } 
          }
      })
      .animation('.modalViewAnimation', function () {
          return {
     beforeAddClass: function(element, className, done) {
      var scope = element.scope();
      if (className == 'ng-hide') {
       var elementWidth = element.parent().width();
       startPoint = 0;
       if(scope.direction !== "right") {
        finishPoint = elementWidth;
       } else {
        finishPoint = -elementWidth;
       }
       TweenMax.fromTo(element, 0.5, { left: startPoint}, {x: finishPoint, onComplete: done });
      } else {
       done();
      }
     },
     removeClass: function(element, className, done) {
      var scope = element.scope();
      if (className == 'ng-hide') {
       var elementWidth = element.parent().width();
       finishPoint = 0;
       if(scope.direction !== "right") {
        startPoint = elementWidth;
       } else {
        startPoint = -elementWidth;
       }
       TweenMax.to("section", 0.5, { height: element.outerHeight()});
       TweenMax.fromTo(element, 0.5, { x: startPoint}, {x: finishPoint, onComplete: done, delay:0.25});
      } else {
       done();
      }
     }
          }
   });</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>I have a wizard slider that is almost working. My problem is accessing the direction property in my animation function after it has been set in the controller. The scope object has value inside the animation but the dot notation of retrieving the direction property with "scope.direction" returns undefined. Why? Any help greatly appreciated. Worth mentioning, I modified the animation function ever so slightly from this <a href="https://github.com/simpulton/angular-photo-slider" rel="nofollow noreferrer">https://github.com/simpulton/angular-photo-slider</a> to achieve what I want. I can't see why my scope.direction returns undefined?</p>
  </blockquote>