http://plnkr.co/edit/Rf0VItthVBg6j0z7KudO
I'm using a jQuery dialog and want to use the dialog buttons, but I don't know how to get at the scope to trigger a (currently non-existent) $http or $resource call back to the server with the updated model when the jQuery dialog button is clicked. I feel as if I'm going about this wrong, but I don't know what direction to go here.
You can use Angular functions to find the scope attached to an element and call a function on it. I prefer to really abstract it away and find the root of the ng-app and broadcast an event into the app so that the outside-code doesn't know about the specifics of the inside code except for the event that you broadcast.
angular.$externalBroadcast = function (selector, event, message) {
var scope = angular.element(selector).scope();
scope.$apply(function () {
scope.$broadcast(event, message);
});
};
Then, from any code, you can call something like:
angular.$externalBroadcast('#app-container', 'doSomething', parameters);
And inside the app, I'd do something like this:
$rootScope.$on('doSomething', function(parameters) {
// handle the external event.
});
If you don't like this approach, just get the scope:
var scope = angular.element(selector).scope();
And do something with it. Just make sure you call scope.$apply or else the digestion cycle won't happen.
Best way is to add directive to control. It is a bad idea to add jQuery with angularjs along side. Directive are made to do this kind of manipulation.
Here's I have modified your plunkr to show you what you can do with directives.
app.directive('date', function() {
return {
restrict: 'A',
require: '^ngModel',
link: function(scope, elm, attrs, ctrl) {
var dp = $(elm);
dp.datepicker({
onSelect: function(dateText) {
scope.$apply(function() { // Apply cause it is outside angularjs
ctrl.$setViewValue(dateText); // Set new value of datepicker to scope
});
}
});
scope.$watch(attrs.ngModel, function(nv) {
dp.datepicker('setDate', nv); // Update datePicker date when scope change
});
}
}
