I have a date filtering string in my scope.
$scope.myModel = {date:""};
I also have a jQuery datepicker
<input date-value="myModel.date" date-picker />
that updates this string inside a directive (using AngularJS - Attribute directive input value change)
.directive('datePicker', function ($timeout) {
return {
scope: {
dateValue: "=?",
},
link : function (scope, elem, attrs) {
$timeout(function() {
elem.data('date-value', scope.dateValue);
elem.bind('change paste', function (blurEvent) {
if (elem.data('date-value') != elem.val()) {
console.log('value changed, old value is:' + elem.data('date-value') +'new value is: ' + elem.val());
elem.data('date-value', elem.val());
scope.dateValue = elem.val();
}
});
});
},
};
});
The root scope date is getting updated correctly and I can successfully send it to a sever, but I want to do something when the date changes. My function gets called once on the page's initialization and then it never does again.
$scope.$watch("myModel.date", function(newVal, oldVal) {
console.log("newVal: " + newVal + ' oldVal:' + oldVal);
if (newVal == oldVal) {
return;
}
// do something
});
What am I doing wrong here?