How to make Swipe work in Angular-UI bootstrap Carousel?
<p>Swipe is not working in Carousel in ui-bootstrap v2.1.4 whereas it is working fine with v1.3.3</p>

<p>Is it any syntax change in new version that is causing error?<br>
OR is it a bug in UI-Bootstrap?</p>

<p>Carousel <a href="https://angular-ui.github.io/bootstrap/#/carousel" rel="nofollow">docs</a> mention that swipe is supported.</p>

<blockquote>
  <p>The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the ngTouch module as a dependency.</p>
</blockquote>

<p>Plunker: <a href="https://plnkr.co/edit/odlDYR?p=preview" rel="nofollow">https://plnkr.co/edit/odlDYR?p=preview</a><br>
(For ease of swiping, plunker can be opened on mobile with QR code.)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ui.bootstrap']);

app.controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 0;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  var slides = $scope.slides = [];
  var currIndex = 0;

  $scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: '//unsplash.it/' + newWidth + '/300',
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
      id: currIndex++
    });
  };

  for (var i = 0; i &lt; 4; i++) {
    $scope.addSlide();
  }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
&lt;html ng-app="ui.bootstrap.demo"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible"
      content="IE=edge" /&gt;
    &lt;meta name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /&gt;

    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.js"&gt;&lt;/script&gt;
    &lt;!-- v1.3.3 swipe works; v2.1.4 swipe does not work --&gt;
    &lt;!--&lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"&gt;&lt;/script&gt;--&gt;
    &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.4.js"&gt;&lt;/script&gt;
    &lt;script src="carousel.js"&gt;&lt;/script&gt;
    &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;

&lt;div ng-controller="CarouselDemoCtrl"&gt;
  &lt;div style="height: 305px"&gt;
    &lt;div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides"&gt;
      &lt;div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"&gt;
        &lt;img ng-src="{{slide.image}}" style="margin:auto;"&gt;
        &lt;div class="carousel-caption"&gt;
          &lt;h4&gt;Slide {{slide.id}}&lt;/h4&gt;
          &lt;p&gt;{{slide.text}}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>