Using $watch for two variables angularjs

Question

I have a pop up screen in which a user require to select from two drop down lists. After the selections were completed i return the selections to the service and save them in an object.

app.service('OriginalService', [ '$modal',

function ($modal) {
var that = this;

this.filtersMananger = { // my-ng-models for the two drop-down-lists
    firstFilter: "",
    secondFilter: ""
};

this.openDialog = function(){
    var modalInstance = $modal.open({
        templateUrl: 'ModalScreen.html',
        controller: 'ModalController',
        resolve: {
            filtersManagerObject: function () {
                return that.filtersMananger;
            }
        }
    });

    modalInstance.result.then(function (filtersMananger) {
        that.filtersMananger.firstFilter = filtersMananger.selectedFirstFilter;
        that.filtersMananger.secondFilter = filtersMananger.selectedSecondFilter;
    }, function () {

    });
};
}
 ]);

The pop up html:

<div class="data-filters-container">
 <div class="data-filter">
    <label for="filter-data-drop-down">FIRST FILTER</label>
    <select name="filterDataDropDown" ng-model="filtersMananger.selectedFirstFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
</div>
  <div class="data-filter col-xs-4">
    <label for="filter-data-drop-down">SECOND FILTER</label>
    <select name="filterDataDropDown" ng-model="filtersMananger.selectedSecondFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
</div>

However, this change is important and i have to call to the controller which knows many other services to send them information regarding this change.

In order to do it i used a watch function in the controller:

 $scope.$watch('OriginalService.filtersMananger.firstFilter + OriginalService.filtersMananger.secondFilter', function (newVal, oldVal) {

        if (newVal !== oldVal) {

           DO SOME LOGIC
        }
    });

I compare between newVal and oldVal because when the app is uploaded the event is called and we enter to this function.

The problem is that the newVal is contains only the value of the secondVariable. Is there any idea why the newVal is not contains also the first variable?

Answer 1

Use $watchCollection :

$scope.$watchCollection('[serviceName.Object.firstVariable,serviceName.Object.secondVariable]', function (newValues, oldValues) {

});

Or if you're using angular 1.3 use $watchGroup :

$scope.$watchGroup(['serviceName.Object.firstVariable','serviceName.Object.secondVariable'],function(newValues, oldValues){

})

Answer 2

You could also use ng-change on your select. The ng-change will call a function that do your logic

<div class="data-filters-container">
   <div class="data-filter">
      <label for="filter-data-drop-down">FIRST FILTER</label>
      <select name="filterDataDropDown"  ng-change="checkFilterOne()" ng-model="filtersMananger.selectedFirstFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
  </div>
  <div class="data-filter col-xs-4">
    <label for="filter-data-drop-down">SECOND FILTER</label>
    <select name="filterDataDropDown" ng-change="checkFilterTwo()" ng-model="filtersMananger.selectedSecondFilter" ng-options="filter.value as filter.name for filter in filterDropDownItems"></select>
</div>

It will call the function when your model will change that is like a $watch.