title: Angularjs datetimepicker not working on partial html view
body: <p>I am trying to use this <a href="https://github.com/xdan/datetimepicker" rel="nofollow noreferrer">jQuery Plugin Date and Time Picker</a> in my Angularjs project to receive date from a user in a form. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Datetime picker&lt;/title&gt;
      &lt;link href="bootstrap.min.css" rel="stylesheet" &gt;
      &lt;link href="jquery.datetimepicker.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;form&gt;
             &lt;input type="text" id="datetimepicker" class="form-control"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;script src="jquery-3.1.1.min.js" &gt;&lt;/script&gt;
      &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.datetimepicker.full.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
      $('#datetimepicker').datetimepicker();
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So, when I click on the form, the datetime widget appears quite alright. At this point I have not used any Angularjs.</p>
  
  <p>Now I want to do this with Angularjs and this is the attempt I've so far made:</p>
  
  <pre><code>&lt;html ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;title&gt;Datetime picker&lt;/title&gt;
      &lt;link href="bootstrap.min.css" rel="stylesheet" &gt;
      &lt;link href="jquery.datetimepicker.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="container" ng-view&gt;&lt;/div&gt;
  
      &lt;script src="angular.min.js" &gt;&lt;/script&gt;
      &lt;script src="ngRoute.js" &gt;&lt;/script&gt;
      &lt;script src="app.js" &gt;&lt;/script&gt;
      &lt;script src="jquery-3.1.1.min.js" &gt;&lt;/script&gt;
      &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.datetimepicker.full.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
      $('#datetimepicker').datetimepicker();
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is my <code>app.js</code> file:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngRoute']);
  
  myApp.config(function($routeProvider){
      $routeProvider
          .when('/datetime', {
              templateUrl: 'admin/date.html',
              controller:  'DateTimeController'
          })
          .otherwise({
              redirectTo: "/"
          });
  });
  
  myApp.controller('DateTimeController', ["$scope", function($scope){
  
  }]);
  </code></pre>
  
  <p>according to my routes, when I get <code>/datetime</code> in the url, the date.html partial is rendered; Here is the code for the date.html partial:</p>
  
  <pre><code>&lt;div ng-controller="DateTimeController"&gt;
      &lt;input type="text" id="datetimepicker" class="form-control"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I did this, I expected the date/time widget to appear but it didn't. So I began searching for solutions. The <a href="https://stackoverflow.com/questions/27798224/internal-javascript-inside-angularjs-partial-view-is-not-working">best solution I found</a> suggested that I use angular directives. According to this solution, I made the following changes: </p>
  
  <p>I created a custom directive <code>date-time</code> and here is the code in my <code>app.js</code> file:</p>
  
  <pre><code>// ...
  
  myApp.directive('dateTime', function () {
     return {
      template:'&lt;input type="text" id="datetimepicker" class="form-control"&gt;',
      restrict: 'E',
      link: function (scope, element, attr) {
         $('#datetimepicker').datetimepicker();
      }
    };
  });
  </code></pre>
  
  <p>and the <code>date.html</code> partial now looked like this:</p>
  
  <pre><code>&lt;div ng-controller="DateTimeController"&gt;
      &lt;date-time&gt;&lt;/date-time&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>At this point I was confident that it will work but it didn't. </p>
  
  <p>What am I doing wrong? Is there a better way of doing this?
  Thanks for any help.</p>