Unable to return a reference to an AngularJS scope from a custom service

Question

The scenario...

I need to update data stored in the property of a scope that is the grandparent of the current scope being worked in. Of course if I attempt to simply write to the property it's not updating the grandparent scope but adding a property to the current scope.

The solution ...

To build a utility service that hosts a function to which you pass the current scope and the name of the property you are looking for. This will recursively look up the parent chain of the current scope until it finds a scope that "hasOwnProperty" of the property being looked for. It will then return a reference to that scope.

The results...

When I run the service from the console I get some strange behavior. I have some console.log markers that trace the effectiveness of the services. Every log output is perfect and exactly what you expect, even the console.log immediately before the return statement logs, to the console, the object as you would expect, however ... the return statement returns "undefined" ... ???

Here's the service code ...

angular.module("app.services", [])
.factory('UtilitiesService', [function () {

    return {

        findPropertyOwner: function (scope, propertyName) {

            console.log("Looking at $scope.$id = " + scope.$id);

            if (!scope.hasOwnProperty(propertyName) && scope.$parent != null) {

                console.log("property not found on " + scope.$id);
                this.findPropertyOwner(scope.$parent, propertyName);
            } else {

                console.log("found on " + scope.$id);
                console.log(scope);
                return scope;
            }
        }
    }

}]);

Any thoughts on why the scope is not being returned?

Thanks in advance :)

EDIT

Thanks for the answer Geoff!!

In regards to invarni's suggestion it definitely will work if I am trying to make a value available to the current scope without "hiding" the one on the grandparent. The catch is however that the grandparent scope will be the grandparent to a number of other scopes in the app. I need any updates made to the data in one descendant scope available to the other descendant scopes in different views. SO the idea is that if I change the grandparent scope it will persist and because of prototypal inheritance be available to other descendant scopes. If anybody knows a better way or sees a flaw in this concept please let me know!!

Thanks again for the feedback!

Answer 1

You need to return the result of your recursive function:

 console.log("property not found on " + scope.$id);
 return this.findPropertyOwner(scope.$parent, propertyName);

Answer 2

I need to update data stored in the property of a scope that is the grandparent of the current scope being worked in. Of course if I attempt to simply write to the property it's not updating the grandparent scope but adding a property to the current scope.

It seems like you might be overcomplicating this. If you have a look at how scope inheritance in Angular works you'll see that you can work around your problem by making the variable you want your grandchild-scope to be able to change a property of an object on the grandparent scope instead of having it as a property directly on the grandparent scope. That is use something like $scope.model.myProp rather than $scope.myProp and then the child scope won't create its own property.