如何观察或观察AngularJS服务中的输入属性更改？

Question

I have a radio button in my UI that has an ngModel and it enable/disable another input through ngDisabled.

I want to observer/watch/trigger when an input element become enabled/disabled and it has to be done in an Angular Service. I simply can't find how to do that. Here is how I would do it in a Directive:

// for the case of field that might be ng-disabled, we should skip validation
// Observe the angular disabled attribute
attrs.$observe("disabled", function(disabled) {
  if (disabled) {
    // Turn off validation when element is disabled
    cancelValidation();
  } else {
    // Re-Validate the input when enabled
    var value = ctrl.$viewValue || '';
    ctrl.$setValidity('validation', validate(value, true));
  }
});

But how to do it in a Service ???
I do not wish to have another Directive, I really want it done through the Service.

Before asking the question, I found this Is it possible to 'watch' attributes' changes and I tried it

scope.$watch(function() {return element.attr('disabled'); }, function(newValue){});

but that does not seem to work, at least not when I enable/disable my radio button (the input element as an ngDisabled that is bind to the radio button with an ngModel)

I also found that we could possible use jQuery.watch() but I want to stick with vanilla javascript or jqLite. Is it possible?

EDIT
I should have mentioned that this Service is on it's own and does not have access to the Controller, because it's a Form validation tool and it does not know about the outside (at least not more than the element itself and his scope). You can check it out and use it if you want: Angular-Validation and it support Directive and Service depending on what or where you want the validation to happen and my problem was related to the code in the Service only. The answer from pankajparkar helped me solved it... Thanks :)

Answer 1

I believe you had attribute disabled with an interpolation something like disabled="{{disable}}" that why you were able to put $observe on that value try changing the same thing to $watch will not work on that attribute , you need to additionally need $interpolate service to evaluate you attribute interpolation. So that the actually value will get evaluate is it disabled or '' and if changes it state then $watch function will get fired accordingly.

Code

scope.$watch(function() {
   return $interpolate(element.attr('disabled'))(scope); //this will evaluate attribute value `{{}}``
}, function(newValue){
    //your code would be here
});

Answer 2

The purpose of a Scope is to "glue together" the presentation and the business logic of your app. It does not make much sense to pass a $scope into a service. You could always do a $scope.$watch at the initialisation of the controller using this service (the one associated with the view of your radio button) and trigger a call to the service to do the update you need.

---

If you can already access this variable in your service (getting it from the controller) you should be able to do :

app.service('myservice',function(){
    this.listen = function($scope) {
        $scope.$watch(function(){return someScopeValue},function(){
           //$scope.dosomestuff();
        });
    }
});

//your controller

function myCtrl($scope,myservice) {
    $scope.listen = function() {
        myservice.listen($scope);
    }

    //call your method
    $scope.listen();
}