Does not display Date in Input if using view-controller-model angular structure and not scope

[tandvu]

I use View-Model-Controller for my angular project

In controller:

angular
    .module('ngBootstrap')
    .controller('SampleCtrl', SectionController);

SectionController.$inject = ['$scope', 'sectionModel'];

function SectionController(scope, sectionModel) {
    var vm = this;
    vm.prop = sectionModel.prop;
    scope.myDate = { "startDate": '2013-09-20', "endDate": '2013-09-25' };

In model:
angular.module('ngBootstrap')
.factory('sectionModel', sectionModel);

function sectionModel() {
    var instance = {
        prop: {
            date: {
                "startDate": '2013-09-20',
                "endDate": '2013-09-25'
            }
        }
    };
    return instance;

in view:

        <div>
            <input type="daterange" ng-model="myDate"> <code>{{myDate}</code>
        </div>
        <div>
            <input type="daterange" ng-model="ctrl.prop.date"> <code>{{ctrl.prop.date}}</code>
        </div>

Result

As you can see, it works fine if I use scope myDate. But the ctrl.prop.date doesn't work. So I change the 2nd input ng-model to myDate

Result

It proves that ctrl.prop.date does have the correct value. Just that if I put it in the ng-model, somehow it got reset to the today's date.

Thanks,

Tan

[luxsyp]

I surprisely have similar issue when using the datepicker in a template, with something like :

<div ng-include src="'views/tpl/dates_and_shops_selector.html'"></div>

If I copy paste the template's code out, everything is good. But with the template, datesfield is blank and model is being reset to today's date

Edit: it seems that this is actually the same error because in my template I am using $parent: so my date is becoming angular structure like you name it

<input class="form-control" id="dateSelector" format='DD MMMM YYYY' readonly="true" type="daterange" ng-model="$parent.dates" ranges="$parent.ranges" />

[tandvu]

This is my hack for the problem (look my previous post for reference):

I write a function getDateRangeStr to return a string of date range of myDate

In the , I add value="ctrl.getDateRangeStr(myDate)"

I go inside ng-bs-daterangepicker.js to comment out the line ngModel.$render()

It seems to work.

Tan

[Programm3r]

@tandvu any chance you can be more specific with your solution. I'm struggling with the exact same issue.

[UPDATE]

@tandvu nevermind

In the directive (ng-bs-daterangepicker): replace $viewValue with $modelValue