Combining JQuery owl-carousel with Angular single page application
<p>I want to have a JQuery owl-carousel object inside my angular js single page application.</p>

<p>this is the code in angular:</p>

<p>index.html:</p>

<pre><code> &lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;title&gt;Small Talkz&lt;/title&gt;
 &lt;head&gt;
    &lt;script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"&gt;
    &lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"&gt;&lt;/script&gt;
    &lt;script src="/socket.io/socket.io.js"&gt;&lt;/script&gt;
    &lt;script src="small-talkz.model.js"&gt;&lt;/script&gt;
    &lt;script src="components/chat/chatController.js"&gt;&lt;/script&gt;
    &lt;script src="components/login/loginController.js"&gt;&lt;/script&gt;
    &lt;script src="../assets/js/owl.carousel.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="../assets/css/jumbotron.css"&gt;
    &lt;link rel="stylesheet" href="../assets/css/style.css"&gt;
    &lt;link rel="stylesheet" href="../assets/css/owl.carousel.css"&gt;
    &lt;link rel="stylesheet" href="../assets/css/owl.theme.css"&gt;

 &lt;/head&gt;
 &lt;body&gt;
    &lt;div ng-app="smallTalkzModel" class="loader"&gt;
        &lt;div ui-view&gt;
        &lt;/div&gt;
    &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

<p>this is where angular routing takes place:</p>

<p>small-talkz.model.js</p>

<pre><code>var smallTalkzModel = angular.module('smallTalkzModel', ['ui.router']);
smallTalkzModel.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('login', {
    url: '/login',
    templateUrl : 'components/login/loginView.html',
    controller  : 'loginController'
  }) 
  .state('chat', {
    url: '/chat',
    templateUrl : 'components/chat/chatView.html',
    controller  : 'chatController'
  })
  .state('carousel', {
    url: '/carousel',
    templateUrl : 'components/carousel/carouselView.html',
    controller  : 'carouselController'
  })
  $urlRouterProvider.otherwise('/login');

});
</code></pre>

<p>and this is the carouselView.html</p>

<pre><code>&lt;body&gt;
&lt;div id="carousel_demo"&gt;
    &lt;div id="owl-example" class="owl-carousel"&gt;
      &lt;div&gt; Content1 &lt;/div&gt;
      &lt;div&gt; Content2 &lt;/div&gt;
      &lt;div&gt; Content3 &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>and this is the carouselController.js</p>

<pre><code>smallTalkzModel.controller('carouselController', ['$scope', 
  function($scope){ 
    $(document).ready(function() {
      $("#owl-example").owlCarousel();
    });
  }]);
</code></pre>

<p>but when I enter into the page (localhost:3000/#/carousel) I don't see anything.</p>

<p>I don't even get an error on chrome developer's tools console (F12).</p>

<p>I think there is something wrong with the combination of JQuery  $(document).ready(..) and angular bootstraping but I am not sure what is the problem...</p>

<p>please help me figure it out.</p>