Untitled

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

 </head>
 <body>
    <div ng-app="smallTalkzModel" class="loader">
        <div ui-view>
        </div>
    </div>
 </body>
 </html>

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');

});

<body>
<div id="carousel_demo">
    <div id="owl-example" class="owl-carousel">
      <div> Content1 </div>
      <div> Content2 </div>
      <div> Content3 </div>
    </div>
</div>
</body>

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

angular.module("app",[]).controller("ctrl",function($scope){
 $(document).ready(function() {

  $("#owl-example").owlCarousel();
})

angular.module("app",[]).controller('owlController', owlController);

function owlController() {
  setTimeout(function(){
    $(#owl-example).owlCarousel({
      items : 3,
      itemsCustom : false,
      itemsDesktop : [1199,2],
      itemsDesktopSmall : [980,2],
      itemsTablet: [768,2],
      itemsTabletSmall: [767,1],
      itemsMobile : [479,1],
      singleItem : false,
      itemsScaleUp : false,
      navigation : true,
      navigationText : ["",""],
      pagination : false
    });
  }, 0);
}

<div id="carousel_demo"  ng-controller="owlController">
    <div id="owl-example" class="owl-carousel">
      <div> Content1 </div>
      <div> Content2 </div>
      <div> Content3 </div>
    </div>
</div>

<div owl-slides-count="3" owl-carousel="">
  <div ng-repeat="post in posts" owl-carousel-item="">
   ...
   </div>
</div>