title: Can I use ng-model with isolated scope?
body: <p>I am creating simple ui-datetime directive. It splits javascript Date object into _date, _hours and _minutes parts. _date uses jquery ui datepicker, _hours and _minutes - number inputs.</p>
  
  <pre><code>angular.module("ExperimentsModule", [])
      .directive("uiDatetime", function () {
      return {
          restrict: 'EA',
          replace: true,
          template: '&lt;div class="ui-datetime"&gt;' +
              '&lt;input type="text" ng-model="_date" class="date"&gt;' +
              '&lt;input type="number" ng-model="_hours" min="0" max="23" class="hours"&gt;' +
              '&lt;input type="number" ng-model="_minutes" min="0" max="59" class="minutes"&gt;' +
              '&lt;br /&gt;Child datetime1: {{datetime1}}' +
              '&lt;/div&gt;',
          require: 'ngModel',
          scope: true,
          link: function (scope, element, attrs, ngModelCtrl) {
              var elDate = element.find('input.date');
  
              ngModelCtrl.$render = function () {
                  var date = new Date(ngModelCtrl.$viewValue);
                  var fillNull = function (num) {
                      if (num &lt; 10) return '0' + num;
                      return num;
                  };
                  scope._date = fillNull(date.getDate()) + '.' + fillNull(date.getMonth() + 1) + '.' + date.getFullYear();
                  scope._hours = date.getHours();
                  scope._minutes = date.getMinutes();
              };
  
              elDate.datepicker({
                  dateFormat: 'dd.mm.yy',
                  onSelect: function (value, picker) {
                      scope._date = value;
                      scope.$apply();
                  }
              });
  
              var watchExpr = function () {
                  var res = scope.$eval('_date').split('.');
                  if (res.length == 3) return new Date(res[2], res[1] - 1, res[0], scope.$eval('_hours'), scope.$eval('_minutes'));
                  return 0;
              };
              scope.$watch(watchExpr, function (newValue) {
                  ngModelCtrl.$setViewValue(newValue);
              }, true);
          }
      };
  });
  
  function TestController($scope) {
      $scope.datetime1 = new Date();
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/andreev_artem/nWsZp/3/"><kbd>jsfiddle</kbd></a></p>
  
  <p>On github: <a href="https://github.com/andreev-artem/angular_experiments/tree/master/ui-datetime">https://github.com/andreev-artem/angular_experiments/tree/master/ui-datetime</a></p>
  
  <p>As far as I understand - best practice when you create a new component is to use isolated scope.</p>
  
  <p>When I tried to use isolated scope - nothing works. ngModel.$viewValue === undefined.</p>
  
  <p>When I tried to use new scope (my example, not so good variant imho) - ngModel uses value on newly created scope.</p>
  
  <p>Of course I can create directive with isolated scope and work with ngModel value through "=expression" (<a href="https://github.com/andreev-artem/angular_experiments/blob/uiDatetime_impl2/ui-datetime/ui-datetime.js">example</a>). But I think that working with ngModelController is a better practice.</p>
  
  <p>My questions:</p>
  
  <ol>
  <li>Can I use ngModelController with isolated scope?</li>
  <li>If it is not possible which solution is better for creating such component?</li>
  </ol>