AngularJS animation timing issue -

I am creating an application with several slides, and I'm using angular JS to toggle sections on elements Trigger experiment using CSS Animation The problem I am experiencing is that when a button is clicked, angle triggers a function on the controller, which determines the class of element updating the property of $ scope Is the beginning to start animation The subject is being updated before the element is old, the orbit is removed, and the new class is assigned, so the element always moves in only one direction.

What do I have to do, when the forward () function is called from slide 1, to slide from slide 2 to right to left, which does it correctly, but when back- The function is called by clicking, the back button on slide 2, slide 2 should slide to the right

What is actually happening when the back-tone () function is called, then Slide 2 Slides on the left Any help is appreciated I'm very new to angular, so I'm trying to figure out what I should do to update that class, and then because of changing the value of the property, the animation Causes

Thanks in advance.

Here (simplified) view is:

  & lt; Div ng-init = "switcher = 'one'" & gt; & Lt; Div ng-switch = "switcher" class = "my-switch-container" & gt; & Lt; Div ng-switch-when = "a" id = "slide 1" ng-square = "slide 1" & gt; & Lt; P & gt; Accessories & lt; / P & gt; & Lt; Button type = "button" class = "btn btn-primary" ng-click = "proceed (") & gt; Proceed & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div ng-switch-when = "two" id = slide 2 "ng-class =" slide2 "> gt; & lt; p & gt; more stuff & lt; / p & gt; button type =" Button "class =" btn "ng-click =" back too () "> back  button type =" button "class =" btn btn-primary "ng-click = 
 Slide 3 "& gt; & Lt; P & gt; Final content & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; (Again, Simplified) Controller:  
  myApp.controller ('siteCtrl', ['$ scope', '$ http', 'SomeData', function ($ radius, $ http, something Data) {$ scope.model = SomeData; $ scope.animateLeft = "my-switch-animation-left"; $ scope.animateRight = "my-switch-animation-right"; $ Scope.slide1 = $ scope.animateLeft; $ Scope.slide2 = $ scope.animateLeft; $ scope.slide3 = $ scope.animateLeft; $ scope.proceed = function () {$ scope.switcher = "two"; $ Scope.slide1 = $ scope.animateRight;} $ Scope.backToOne = function () {$ scope.slide2 = $ scope.animateRight; $ scope.switcher = "one";} $ scope.keepGoing = function () {$ scope .switcher = "three"; $ scope.slide2 = $ Scope.animateRight;}}]);  
 
 Here's the CSS: 
 
  .my-switch-container {position: relative; }. My-switch-animation-left, .my-switch-animation-right {width: 700px; Background color: #fff; Range radius: 20px; Limit: 1px solid # 000; -WebKit-boundary-radius: 20px; -image-radius: 20px; -WebKit-Box-Shadow: 0 5px 15px # 000; -Move box-shadow: 0 5px 15px # 000; -MM-Box-Shadow: 0 5px 15px # 000; Box-Shadow: 0 5px 15px # 000; Margin: 0 auto; }. My-switch-animation-left.ng-enter, .my-switch-animation-left.ng-leave, .my-switch-animation-right.ng-enter, .my-switch-animation-right.ng-claw {-webkit-transition: 1s linear all; -MOZ-Infection: 1s linear all; -O-Infection: 1s linear all; -Management: 1s linear all; Status: Relative; Top: 0 pixels; } / * Right to right * / .my-switch-animation-left.ng- Insert {Left: 100%; }. My-switch-animation-left.ng-leave, .my-switch-animation-left.ng-enter.ng-entertivated {left: 0; } .my-switch-animation-left.ng-leave.ng-leave-active {Left: -100%; } / * Right-to-right * / .my-switch-animation-right.ng- {true: 100%; }. My-switch-animation-right.ng-leave, .my-switch-animation-right.ng- enter.ng-enter-active {true: 0; }. My-switch-animation-right.ng-leave.ng-leave-active {true: -100%; }  
 
 Here is a grid: 
 
 
 
 
 try Do: 
   $ scope.backToOne = function () {$ scope.slide2 = $ scope.animateRight; $ Scope $ apply () .; $ Scope.switcher = "one"; }  

There was no chance of running the digest before implementing the NG-class $ would be obliged to re-evaluate the scope of the application that is popped up on the console, But it works.