Slide div to right and left in the angular click [closed]

You can create a directive to manipulate the DOM by adding and removing classes and CSS to manipulate the animation.

HTML

<div ng-app="app" ng-controller="AppCtrl as vm">
    <button ng-click='vm.move()'>Move</button>
    <div class="slide" move='vm.side'></div>
</div>

CSS

.slide{
  width: 50px;
  height: 40px;
  background: blue;
  margin-left: 0;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease
}
.slide.left{
  margin-left: 0;
}
.slide.right{
  margin-left: 200px;
}

Javascript (Angular)

angular.module('app', [])
    .controller('AppCtrl', function () {
            var vm = this;
      vm.side = 'left';
      vm.move = function () {
        vm.side = vm.side == 'left'? 'right' : 'left';
      }
    })
  .directive('move', function () {
    return {
        restrict: 'A',
      scope: {move: '='},
      link: function (scope, element, attrs, controller) {
        scope.$watch('move', function (side) {
            angular.element(element).addClass(side);
          var toRemove = side == 'left'? 'right' : 'left';
          angular.element(element).removeClass(toRemove);
        })
      }
    }
  })

Example working: link