Mike Sav Mike Sav - 1 year ago 85
AngularJS Question

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

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 }}">


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 Source

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 -->

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);


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()};
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download