title: datetimepicker is not displaying calendar using NgRoute of AngularJs
body: <p>I'm having some problems when I tried to open a calendar using jquery ui thru NgRoute Angularjs. I've tried removing ng-view tag and it works fine. i need it working with NgRoute.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="mainApp"&gt;
  
  &lt;head lang="en"&gt;
    &lt;title&gt;AngularJS Routing&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;li&gt; &lt;a href="#/datePicker"&gt; Date Picker&lt;/a&gt; &lt;/li&gt;
  
    &lt;div ng-app="mainApp"&gt;
      &lt;ng-view&gt;&lt;/ng-view&gt;
    &lt;/div&gt;
  
    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;    
  </code></pre>
  
  <p>main.jsp</p>
  
  <pre><code>(function() {
    "use strict";
  
  var mainApp = angular.module("mainApp", ['ngRoute']);
  
  mainApp.config(function($routeProvider) {
      $routeProvider
          .when('/datePicker', {
              templateUrl: 'DatePicker.html',
              controller: 'DemoCtrl'
          })
          .otherwise({
              redirectTo: '/index'
          });
  });
  
  mainApp.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {
  
        //$('#datepicker1').datepicker();
  
  }]);
  
  })();
  </code></pre>
  
  <p>DatePicker.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="mainApp"&gt;
  
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
           $(function() {
              $( "#datepicker1" ).datepicker();
           });
      &lt;/script&gt;
    &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;form&gt;
      &lt;p&gt;Fecha: &lt;input id="datepicker1" type="text" &gt;&lt;/p&gt;
      &lt;a href="#/index"&gt; Main menu&lt;/a&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j" rel="nofollow">http://plnkr.co/edit/Wk4zZo0WfoypMmaMgv4j</a></p>
  
  <p>I will appreciate any help on this issue.</p>
  
  <p>Thank you so much,
  Ariel.</p>