Parent scope update by angularjs datepicker directive - angularjs

Question

I am developing a datePicker directive comprising 3 x selects (views/datetime.html)
<select class="form-control input-group-sm w75 float-left"
ng-model="mth"
ng-options="x for x in ['Jan','Feb','Mar','Apr','May','Jun']">
</select>
<select class="form-control input-group-sm w75 float-left"
ng-model="day"
ng-options="x for x in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]">
</select>
<select class="form-control input-group-sm w75"
ng-model="year"
ng-options="x for x in [2014,2015,2016,2017,2018]">
</select>
The directive can be used one or more time in each html view (startdate, enddate, etc)
<div class="input-group-sm" date-picker ng-model="startdate"></div>
My directive is coded as follows:
App.directive('datePicker', function () {
var date = {};
var objLink = {
restrict: 'A',
templateUrl: 'views/datetime.html',
scope: {
ngModel: '=',
},
link: function($scope, element, attr) {
$scope.$watch("mth", function(value) {
if ( typeof value != 'undefined' ) {
date.mth = value;
updateTarget($scope, attr);
}
});
$scope.$watch("day", function(value) {
if ( typeof value != 'undefined' ) {
date.day = value;
updateTarget($scope, attr);
}
});
$scope.$watch("year", function(value) {
if ( typeof value != 'undefined' ) {
date.year = value;
updateTarget($scope, attr);
}
});
}
};
return objLink;
function updateTarget( scope, attr ) {
var d = date.mth+'-'+date.day+'-'+date.year;
scope[attr.date] = d;
}
});
My issue is that function UpdateTarget() does NOT update the $scope.startdate in the controller.
Any ideas...anyone? Thanks in advance.

Answer 1

scope[attr.date] = d;
Here attr.date is undefined. To update the $scope.startdate in the controller, you need to pass attr.ngModel as stated below
scope[attr.ngModel] = d;

Answer 2

...Worked it all out myself! Thx for any feedback.
App.directive('datePicker', function () {
var mths = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var dirLink = {
restrict: 'A',
templateUrl: 'views/datetime.html',
scope: {
data : '='
},
link: function($scope, element, attr) {
// watch bound data item for change
// - ajax load delay from view render
$scope.$watch("data", function(value) {
if ( typeof $scope.data == 'undefined' ) {
return;
}
// initialise view controls
if ( typeof $scope.mth == 'undefined' ) {
var a = $scope.data.split(' ');
var dt = a[0].split('-');
$scope.mth = mths[dt[1]-1];
$scope.year = dt[0];
$scope.day = dt[2];
}
});
// watch view controls
$scope.$watch("mth", function(value) {
if ( typeof value != 'undefined' ) {
var mth = padl(mths.indexOf(value)+1);
updateTarget($scope, 'mth', mth);
}
});
$scope.$watch("day", function(value) {
if ( typeof value != 'undefined' ) {
updateTarget($scope, 'day', value);
}
});
$scope.$watch("year", function(value) {
if ( typeof value != 'undefined' ) {
updateTarget($scope, 'year', value);
}
});
}
};
return dirLink;
function updateTarget( scope, seg, val ) {
// init date if empty
if ( scope.data.length < 8 ) {
var d = new Date();
var dt = d.getYear()+'-'+padl(d.getMonth())+'-'+padl(d.getDate());
scope.data = dt;
}
// split existing data
var a = scope.data.split(' ');
var dt = a[0].split('-');
// change selected segment
var d = ['year','mth','day'];
dt[d.indexOf(seg)] = val;
// reassemble date
var d = dt[0]+'-'+dt[1]+'-'+dt[2];
scope.data = d;
}
function padl( n ) {
return ("0"+n).slice(-2);
}
});