Angularjs datetimepicker not working on partial html view
<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>