AngularJS binding works upon DOM nodes, if you move, delete or replace a DOM node that AngularJS is watching, then the code will no longer work.
As Thomas Kagan said, Dojo widgets will replace the DOM node with the data-dojo-type on it by the DOM nodes provided in the template of those widgets. This simply erases your binding as if it didn't exist.
A proper AngularJS solution would be to wrap the Dojo DateTextBox inside a directive, so AngularJS knows that this is encapsulated and AngularJS should only access the directive through an API (the scope of a directive).
For example:
myApp.directive("dateTextBox", function($timeout) {
var link = function(scope, elem, attr) {
require(["dijit/form/DateTextBox"], function(DateTextBox) {
var dateTxtBox = new DateTextBox({});
dateTxtBox.set('value', scope.date);
dateTxtBox.on("change", function(date) {
$timeout(function() {
scope.date = date;
});
});
elem.append(dateTxtBox.domNode);
});
};
return {
restrict: 'E',
scope: {
date: "="
},
link: link
};
});
This is just a basic example, I also made a demo, which you can view by running the snippet below.
angular.module("myApp", []).controller("TestCtrl", function($scope) {
$scope.date = new Date();
})
.directive("dateTextBox", function($timeout) {
var link = function(scope, elem, attr) {
require(["dijit/form/DateTextBox"], function(DateTextBox) {
var dateTxtBox = new DateTextBox({});
dateTxtBox.set('value', scope.date);
dateTxtBox.on("change", function(date) {
$timeout(function() {
scope.date = date;
});
});
elem.append(dateTxtBox.domNode);
});
};
return {
restrict: 'E',
scope: {
date: "="
},
link: link
};
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css" />
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" class="claro">
<div ng-controller="TestCtrl">
<date-text-box date="date"></date-text-box><br />
{{date | date}}
</div>
</body>
</html>
