Currently, I have a $watch function that is listening for an input and then calling a service to retrieve new data. This returned data is essential for another function called $watchCollection.
My dilemma lies in finding a way to notify the $watchCollection function that a $watch has occurred, so that it can update the scope accordingly.
Below is a snippet of my HTML code:
<div ng-controller="MainCtrl">
<p>A: <input type="text" ng-model="input"></p>
<p>B: <input type="text" ng-model="output"></p>
</div>
Here's my JavaScript code:
angular.module('testapp', [])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.$watch('input', function(newVal, oldVal){
//go get some data from a service...
var reallyNewVal = Date.now();
$scope.input = reallyNewVal;
});
$scope.$watchCollection('[output]', function(output){
//watch this, plus some other stuff too, omitted for simplicity
$scope.output = $scope.input - 1391754634457;
});
}]);
If you want to see a live example, check out this JSfiddle link: http://jsfiddle.net/gC7Zr/
I am asking for help on how to update the $watchCollection function when $scope.input changes due to $watch, without adding $scope.input directly into $watchCollection as it involves a XHR request.
Please share your ideas with me!
EDIT:
For further clarification, here is another example demonstrating what I am trying to achieve: http://jsfiddle.net/n46rj/
Notice how changing B updates C, but changing A does not trigger an update in C. How can I make the $watchCollection 'update' ($digest?) when $watch is triggered?