title: image slider doesn't work using route in angular js
body: <p>I'm newbie to Angular js..But try to make an image slider in my file..</p>
  
  <p>And also I'm using route..Acutally I'm having three pages..</p>
  
  <p><strong>1.home</strong>
  <strong>2.about</strong>
  <strong>3.contact</strong></p>
  
  <p>For this I create an <code>index</code> file in which I add header and footer</p>
  
  <p>While I'm adding the slider in my <code>index</code> page it works fine for me..</p>
  
  <p>But if I did the same thing in my <strong><code>home</code></strong> page..It won't work and I din't find any errors in my console also..</p>
  
  <p>I don't know how to fix it..</p>
  
  <p>Here I attach my all codes..</p>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>// create the module and name it scotchApp
  var scotchApp = angular.module('scotchApp', ['ngRoute','ngAnimate', 'ngTouch']);
  
  // configure our routes
  scotchApp.config(function($routeProvider) {
      $routeProvider
  
          // route for the home page
          .when('/', {
              templateUrl : 'pages/home.html',
              controller  : 'homeController'
          })
  
          // route for the about page
          .when('/about', {
              templateUrl : 'pages/about.html',
              controller  : 'aboutController'
          })
  
          // route for the contact page
          .when('/contact', {
              templateUrl : 'pages/contact.html',
              controller  : 'contactController'
          });
  });
  
  // create the controller and inject Angular's $scope
  scotchApp.controller('mainController', function($scope) {
  
      //Logo
      $scope.logo = 'logo.png';
  
      //username
      $scope.username = 'Jonathan Stephanopalus';
  
      //footercontent
      $scope.footer = [
          { title: 'Contacts' },
          { title: 'Feedback' },
          { title: 'Help' },
          { title: 'Site Map' },
          { title: 'Terms &amp; Conditions' },
          { title: 'Privacy Statement' },
          { title: 'Cookie Policy' },
          { title: 'Trademarks' }
  
      ];
  
  });
  
  scotchApp.controller('homeController', function($scope) {
  
      // create a message to display in our view
      $scope.message = "Lorem Ipsum ";
      //lastdiv
      $scope.lastdiv = { image : "women_wright.png" ,title:"Get to know Cisco better: Community Forums"};
  
      //slider
      $scope.slides = [
          {image: 'images/img00.jpg', description: 'Image 00'},
          {image: 'images/img01.jpg', description: 'Image 01'},
          {image: 'images/img02.jpg', description: 'Image 02'},
          {image: 'images/img03.jpg', description: 'Image 03'},
          {image: 'images/img04.jpg', description: 'Image 04'}
      ];
  
      $scope.direction = 'left';
      $scope.currentIndex = 0;
  
      $scope.setCurrentSlideIndex = function (index) {
          $scope.direction = (index &gt; $scope.currentIndex) ? 'left' : 'right';
          $scope.currentIndex = index;
      };
  
      $scope.isCurrentSlideIndex = function (index) {
          return $scope.currentIndex === index;
      };
  
      $scope.prevSlide = function () {
          $scope.direction = 'left';
          $scope.currentIndex = ($scope.currentIndex &lt; $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
      };
  
      $scope.nextSlide = function () {
          $scope.direction = 'right';
          $scope.currentIndex = ($scope.currentIndex &gt; 0) ? --$scope.currentIndex : $scope.slides.length - 1;
      };
  
  });
  
  scotchApp.animation('.slide-animation', function () {
      return {
          beforeAddClass: function (element, className, done) {
              var scope = element.scope();
  
              if (className == 'ng-hide') {
                  var finishPoint = element.parent().width();
                  if(scope.direction !== 'right') {
                      finishPoint = -finishPoint;
                  }
                  TweenMax.to(element, 0.5, {left: finishPoint, onComplete: done });
              }
              else {
                  done();
              }
          },
          removeClass: function (element, className, done) {
              var scope = element.scope();
  
              if (className == 'ng-hide') {
                  element.removeClass('ng-hide');
  
                  var startPoint = element.parent().width();
                  if(scope.direction === 'right') {
                      startPoint = -startPoint;
                  }
  
                  TweenMax.fromTo(element, 0.5, { left: startPoint }, {left: 0, onComplete: done });
              }
              else {
                  done();
              }
          }
      };
  });
  
  scotchApp.controller('aboutController', function($scope) {
      $scope.message = 'Look! I am an about page.';
  });
  
  scotchApp.controller('contactController', function($scope) {
      $scope.message = 'Contact us! JK. This is just a demo.';
  });
  </code></pre>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>&lt;div ng-controller="homeController"&gt;
      &lt;div class="container slider"&gt;
          &lt;img  ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}"&gt;
          &lt;a class="arrow prev" href="#" ng-click="nextSlide()"&gt;&lt;/a&gt;
          &lt;a class="arrow next" href="#" ng-click="prevSlide()"&gt;&lt;/a&gt;
          &lt;nav class="nav"&gt;
              &lt;div class="wrapper"&gt;
                  &lt;ul class="dots"&gt;
                      &lt;li class="dot" ng-repeat="slide in slides"&gt;
                          &lt;a href="#" ng-class="{'active':isCurrentSlideIndex($index)}" ng-click="setCurrentSlideIndex($index);"&gt;{{slide.description}}&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;!-- define angular app --&gt;
  &lt;html ng-app="scotchApp"&gt;
  
  &lt;head&gt;
        &lt;!-- SCROLLS --&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /&gt;
      &lt;!-- &lt;link rel="stylesheet" href="styles/main.css" /&gt; --&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /&gt;
      &lt;!-- &lt;link href="css/bootstrap.css" rel="stylesheet"&gt; --&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
      &lt;!-- &lt;script src="js/app.js"&gt;&lt;/script&gt; --&gt;
  
        &lt;!-- SPELLS --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"&gt;&lt;/script&gt;
        &lt;!-- &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"&gt;&lt;/script&gt; --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;!-- define angular controller --&gt;
  &lt;body class="angular_class" ng-controller="mainController"&gt;
  
    &lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container"&gt;
        &lt;div class="menu_1"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="/"&gt;&lt;img src="image/{{logo}}"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="f_right"&gt;
            &lt;p&gt;Welcome, {{ username }}&lt;/p&gt;
            &lt;img src="image/sml_logo.png"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="menu_1"&gt;
  
          &lt;ul class="nav navbar-nav navbar-left"&gt;
            &lt;li ng-repeat="teams in teamArray"&gt;&lt;a href="#{{ teams.link }}"&gt;{{ teams.team_name }}&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="f_right"&gt;
            &lt;input type="text" class="searchbox" placeholder="Search"&gt;&lt;/input&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;div id="main"&gt;
  
      &lt;!-- angular templating --&gt;
          &lt;!-- this is where content will be injected --&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;footer class="text-center"&gt;
      &lt;div class="footer_block"&gt;
        &lt;span ng-repeat="ft in footer"&gt;&lt;a href=""&gt;{{ ft.title }}&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And for information I follow this <a href="http://onehungrymind.com/build-sweet-photo-slider-angularjs-animate/" rel="nofollow">link</a></p>
  
  <p>Could someone please help me out of this..</p>
  
  <p>Thank you,</p>