title: Angularjs bootstrap datetimepiker not bind model
body: <p>I have a little problem in using an AngularJS directive with a object property inside an MVC project. The overall structure is a <em>.cshtml</em> page that contains a reference to the scripts file that contains definitions for the app, controller and directives. Everything works fine and the access to all objects and variables is perfectly fine with no errors show on the console.</p>
  <p>This is my setup, first of all the directive:</p>
  <pre><code>var app = angular.module(&quot;dataContainer&quot;, ['ngMaterial']);
  app.directive('dateTime', function () {
      return {
          template: '&lt;input type=&quot;text&quot; id=&quot;datetimepicker&quot; class=&quot;form-control&quot;&gt;',
          restrict: 'E',
          require: 'ngModel',
          scope: {},
          link: function (scope, element, attr) {
              $('#datetimepicker').datetimepicker({
                  format: 'DD/MM/YYYY'
              });
          }
      };
  });
  </code></pre>
  <p>First of all I've tried to bind this value inside a <code>$scope</code> variable, without success, here is the portion of the controller:</p>
  <pre><code>app.controller(&quot;InvoiceDetailController&quot;, function ($scope, $http) {
      $scope.dateValue = &quot;&quot;;
      ...
  
  </code></pre>
  <p>After that I've inserted the html tag like this:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;date-time ng-model=&quot;dateValue&quot;&gt;&lt;/date-time&gt;
  </code></pre>
  <p>But when I trigger an action on a <code>ng-click</code> to save information the <code>$scope.dateValue</code> is always an empty string, like it is not able to correctly bind to the div. I also have tried removing scope property from the directive, change it to <code>true</code> and <code>false</code>, but nothing works. It is an accessibility problem (maybe related to the datepicker)? Is there a better way to bind variables to directives in AngularJS? Thank you all for the help!</p>