title: Bootstrap DateTimePicker with AngularJS: Passing directive ngModel value to controller
body: <p>I am trying to get angular bootstrap datetimepicker input value using a custom directive like shown below. I am able to get the value in directive. How can i access this directive scope value in angular controller.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div class='input-group date'  id='datetimepickerId' datetimez ng-model="dueDate" &gt;
            &lt;input type='text'  class="form-control" /&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>App.directive('datetimez', function(){
      return {
          require: '?ngModel',
          restrict: 'A',
          link: function(scope, element, attrs, ngModel){
              if(!ngModel) return;  
              ngModel.$render = function(){
                  element.find('#datetimepickerId').val( ngModel.$viewValue || '' );
              };
              element.datetimepicker({ 
                  format : 'YYYY-MM-DD HH:mm:ss'
              });
              element.on('dp.change', function(){
                  scope.$apply(read);
              });
              read();
              function read() {
                  var value = element.find('#datetimepickerId').val();
                  ngModel.$setViewValue(value);
                  console.log(scope.dueDate);
              }
          }
      };
  });
  
  App.controller('myController', ['$scope', function($scope) {
      console.log($scope.dueDate);
  }]);
  </code></pre>
  
  <p>Log inside the directive prints value successfully. But log inside controller does not.</p>