How to access the AngularJS ui-bootstrap datepicker value in my controller

Question

I am using the AngularJS Bootstrap UI library. In my view I have the datepicker directive like so...

<div datepicker ng-model="mt" min-date="minDate" max-date="maxDate" year-range="1" show-weeks="false" ></div>

I've noticed that when I try to reference the value of "mt" in my controller it is always undefined whilst it is correct / updates in the view. For example here is my controller code:

if(something === true) {
  console.log({ people: $scope.guestNumber, resTime: $scope.resTime, ddmmyyyy: $scope.mt }); // $scope.mt is always undefined!!!! 
}

Obviously this must be due to the directive having its own scope.... so my question is, how do I access the value of "mt" in my controller. I was going to use a hidden form input but this feels a little dirty to me (and I am unsure if it will work), like so:

<div datepicker ng-model="mt" min-date="minDate" max-date="maxDate" year-range="1 show-weeks="false" ></div>
<input type="text" ng-model="hiddenDate" value="{{ mt }}">

UPDATE

I have noticed that this bug only seems to happen when my datepicker is in a modal window provided by ui.bootstrap.modal. The service I have for the models looks like so:

factory('modalService', function ($modal) {

        var modal = angular.copy($modal);

        // standard modal for alerts
        modal.reservationMenu = function(message, title) {
            var options = {
                templateUrl: '../../views/modal/model-form.html',
                controller: 'ModalMenuCtrl',
                resolve: {
                    things: function() {
                        return {
                            title: title,
                            message: message
                        };
                    }
                },
                windowClass: 'menu-dia'
            };
            return modal.open(options);
        };

        return modal;
    })

;

If I set the value of the datepicker in my controller, the date is never updated!

Answer 1

It's because you haven't initialized mt in your scope probably.

ng-model on datepicker is a two-way binding, so when you don't provide value in your controller the value is undefined . When the user chooses a date it'll be set but no earlier.

Look at this example: Plnkr.co

<div data-ng-controller="TestController">
  <div datepicker data-ng-model="mt"  data-year-range="1" data-show-weeks="false" ></div>
  Date: {{mt}} <!-- 'filled' on init -->

  <div datepicker data-ng-model="nt"  data-year-range="1" data-show-weeks="false" ></div>
  Date: {{nt}} <!-- empty on init -->
</div>

---

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('TestController', ['$scope',
    function($scope) {

    $scope.mt = new Date();

    $scope.$watch('mt', function(newValue, oldValue) {
      console.log('mt changed', oldValue, newValue);
    }, true);

    $scope.$watch('nt', function(newValue, oldValue) {
      console.log('nt changed', oldValue, newValue);
    }, true);
  }
]);

UPDATE

Ok. So I think that you have mt in a child scope but you want to get it in parent scope.

You could try doing something like this:

<div datepicker data-ng-model="dateHolder.mt"...

and in controller:

$scope.dateHolder = {mt: new Date()};