Watching model in a Service never catch any change

Question

I have been struggling with this (supposed to be) simple issue for several hours.

What I have got is: there is a provider that will watch the model changes then will update the database accordingly. Following is the code taken from the fiddle focused on the part with the issue.

this.$get = function ( ) {
            return {
                listen: function ( $scope, model ) {
                    if ( !that.enabled ) return;
                    $scope.$watch( function () {
                            return $scope.model;
                        },
                        function ( newValue, oldValue ) {
                            if ( newValue != oldValue ) {
                                // never gets to this line !
                                alert('Cool !');

                                // .. rest of the code to proceed with db updates
                            }
                        } );
                }
            };

check out the fiddle for the working code.

Any help is deeply appreciated.

Answer 1

Here is a working fiddle.

The main issues were that:

1. TestCtrl was not registered to any module. So, I wired it up by calling TestModule.controller.
2. You needed a deep watch on model. So, now the watch has a third parameter (set to true). This will watch into the properties of the model object.

Here is the full code:

var TestModule = angular.module( 'TestModule', [ 'AutoSaveP' ] )
.config( function ( autoSaveProvider ) {
    autoSaveProvider.enabled = true;
    autoSaveProvider.tablename = 'test';
    autoSaveProvider.primary_field = 'test_id';
} );

TestModule.controller('TestCtrl', function( $scope, $timeout, autoSave ) {
    $scope.model = {
        test_id: 1,
        first_name: 'john',
        last_name: 'doe'
    };
    $timeout( function () {
        autoSave.listen( $scope, $scope.model );
    }, 100 );
});

var AutoSaveP = angular.module( 'AutoSaveP', [ ] )
.provider('autoSave',
     function () {
        this.enabled = true;
        this.table_name = null;
        this.primary_field = null;

        this.$get = function ( ) {
            return {
                listen: function ( $scope, model ) {
                    $scope.$watch( function () {
                            return $scope.model;
                        },
                        function ( newValue, oldValue ) {
                            if ( newValue != oldValue ) {
                                // now gets to this line!
                                alert('Cool !');

                                // .. rest of the code the proceed with db updates
                            }
                        }, true );
                }
            };
        };
    });