AngularJS: How should I update a property on a resolved promise inside of my watch listener?

Problem

Consider this Plunkr.

Inside of my watch listener, I'd like to update a property on a resolved promise.

  • Is it correct to modify values on the $$v property?
  • If not, then what should I do?

Here is the HTML:

<!DOCTYPE html>
<html id="ng-app" ng-app="myAngularApp">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc2" src="http://code.angularjs.org/1.2.0-rc.2/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MyController">
    <input ng-model="myDto.Weight" />{{myDto.Status}}
  </body>

</html>

Here is the JavaScript:

var myDto = {Weight: 200, Status: 'Acceptable'};

var myAngularApp = angular.module('myAngularApp', []);

myAngularApp.factory('myService', function($q){
  return {
    getMyDto: function(){
      var deferred = $q.defer();
      deferred.resolve(myDto);
      return deferred.promise;
    }
  };
});

myAngularApp.controller('MyController', function MyController($scope, myService){
  $scope.myDto = myService.getMyDto();
  $scope.$watch('myDto.Weight', function(newVal, oldVal){
    if (newVal < 150) {
      $scope.myDto.$$v.Status = 'Too Light!'; // Is this the recommended way of doing it?
    }
    else if (500 < newVal) {
      $scope.myDto.$$v.Status = 'Too Heavy!';
    }
    else if (Number(newVal)) {
      $scope.myDto.$$v.Status = 'Acceptable';
    }
    else {
      $scope.myDto.$$v.Status = 'Not a number!';
    }
  });
});
Problem courtesy of: Jim G.

Solution

I wouldn't modify $$v directly, it's an implementation detail. Instead, use then to get the result of the promise, then use it however you like. That requires minimal change to your code.

Demo link

myAngularApp.controller('MyController', function MyController($scope, myService){
  ($scope.myDto = myService.getMyDto()).then(function(myDto) {
    $scope.$watch('myDto.Weight', function(newVal, oldVal){
      if (newVal < 150) {
        myDto.Status = 'Too Light!'; // Is this the recommended way of doing it?
      }
      else if (500 < newVal) {
        myDto.Status = 'Too Heavy!';
      }
      else if (Number(newVal)) {
        myDto.Status = 'Acceptable';
      }
      else {
        myDto.Status = 'Not a number!';
      }
    });
  });
});
Solution courtesy of: Buu Nguyen

Discussion

It is a little bit weird to modify the promise since a promise represents the result of an action that is performed asynchronously. It is self-contained.

I think it is better to add another service function to update data the status. Try this

myAngularApp.factory('myService', function ($q) {
    var deferred = $q.defer();
    return {
        getMyDto: function () {
            deferred.resolve(myDto);
            return deferred.promise;
        },
        updateStatus: function (status) {
            myDto.Status = status;
            deferred.resolve(myDto);
            return deferred.promise;
        }
    };
});

myAngularApp.controller('MyController', function MyController($scope, myService) {
    $scope.myDto = myService.getMyDto();
    $scope.$watch('myDto.Weight', function (newVal, oldVal) {
        if (newVal < 150) {
            myService.updateStatus('Too Light!');
        } else if (500 < newVal) {
            myService.updateStatus('Too Heavy!');
        } else if (Number(newVal)) {
            myService.updateStatus('Acceptable');
        } else {
            myService.updateStatus('Not a number!');
        }
    });
});

Updated Plunker

Discussion courtesy of: zsong

This recipe can be found in it's original form on Stack Over Flow.