title: JQuery UI Slider inside Modal Dialog
body: <p>My <a href="http://api.jqueryui.com/slider/" rel="nofollow">JQuery UI Slider</a> widget doesn't show up inside a Modal, it does show in normal content though.</p>
  
  <p><a href="http://plnkr.co/edit/fNecCItRBLNwBAX6pSJm" rel="nofollow">HERE'S THE PLUNKER</a></p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
  
   &lt;head&gt;
    &lt;script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /&gt;
    &lt;script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"&gt;&lt;/script&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"&gt;&lt;/script&gt;
    &lt;script src="example.js"&gt;&lt;/script&gt;
    &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;div ng-controller="ModalDemoCtrl"&gt;
    &lt;script type="text/ng-template" id="myModalContent.html"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
  
          &lt;span&gt;SLIDER?&lt;/span&gt;
          &lt;div class="slider"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-primary" type="button" ng-click="ok()"&gt;OK&lt;/button&gt;
          &lt;button class="btn btn-warning" type="button" ng-click="cancel()"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/script&gt;
    &lt;button type="button" class="btn btn-default" ng-click="open()"&gt;Open me!&lt;/button&gt;
  
  
    &lt;div&gt;
    &lt;span&gt;SLIDER OK&lt;/span&gt;
    &lt;div class="slider"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavasCript</p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($scope, $uibModal, $log) {
  
    $scope.animationsEnabled = true;
    $scope.open = function(size) {
  
    var modalInstance = $uibModal.open({
       animation: $scope.animationsEnabled,
       templateUrl: 'myModalContent.html',
       controller: 'ModalInstanceCtrl',
       size: size,
       resolve: {
         items: function() {
         return $scope.items;
        }
    }
  });
  
  modalInstance.result.then(function(selectedItem) {
  
  }, function() {
    $log.info('Modal dismissed at: ' + new Date());
  });
  };
  });
  
  
  angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function($scope, $uibModalInstance, items) {
  
  
  
  $scope.cancel = function() {
      $uibModalInstance.dismiss('cancel');
  };
  });
  $(function() {
      $(".slider").slider();
  });
  </code></pre>