javascript - Angularjs service call from $rootscope causes unending iterative loop -

i'm new ng-world please go easy on noobness :)

i've tried keep "angular" way of thinking in organizing code , understanding it's dependency injection ioc methodologies.

one of goals dealing rest services in sharepoint. sharepoint integration not issue itself. need call rest service on key-presses within ui elements provide suggestion lists. said i've got service wired , working using ngresource. service combination of $resource element , factory injected helper method wires payload json required in post.

an example of how can test service in controller is:

peoplepickercontrollers.controller('peoplepickersearchctrl',         ['$scope', 'peoplepickerutils',            function($scope, peoplepickerutils) {                $scope.data = peoplepickerutils.resolveuser('scott');  }]); 

this calls method factory injected service module. when assigning $scope element data results binding data with:

{{ data | json }} 

i expected results.

however because service method needs called repeatedly during ui interaction , within every controller wanted bind globally.

following few different discussion threads decided on using app.run() wire $rootscope so:

myapp.run(['$rootscope','peoplepickerutils',    function($rootscope, peoplepickerutils) {        $rootscope.peoplepicker = peoplepickerutils;    } ]); 

i know concept works, because following code sample runs without problem:

 myapp.run(['$rootscope','myutilmethod',           function($rootscope, myutilmethod) {               $rootscope.myglobalfunc = function(params) { return params; };           }       ]);              myapp.controller('mainctrl', ['$scope', function($scope){}]);   </script>   <div ng-controller="mainctrl">       <pre>{{ myglobalfunc("foo") }}</pre>   </div> 

unfortunately when bind service reference in root scope , call within page stuck in eternal loop crashes chrome. errors follows:

http://errors.angularjs.org/1.3.15/$rootscope/infdig?p0=10&p1=%5b%5dregex_string_regexp @ angular.js:63$get.scope.$digest @ angular.js:14346$get.scope.$apply @ angular.js:14571done @ angular.js:9698completerequest @ angular.js:9888requestloaded @ angular.js:9829 angular.js:11655 error: [$rootscope:infdig] 10 $digest() iterations reached. aborting! watchers fired in last 5 iterations: [] http://errors.angularjs.org/1.3.15/$rootscope/infdig?p0=10&p1=%5b%5d     @ regex_string_regexp (angular.js:63)     @ scope.$get.scope.$digest (angular.js:14346)     @ scope.$get.scope.$apply (angular.js:14571)     @ done (angular.js:9698)     @ completerequest (angular.js:9888)     @ xmlhttprequest.requestloaded (angular.js:9829)(anonymous function) @ angular.js:11655$get @ angular.js:8596$get.scope.$apply @ angular.js:14573done @ angular.js:9698completerequest @ angular.js:9888requestloaded @ angular.js:9829 angular.js:63 uncaught error: [$rootscope:infdig] 10 $digest() iterations reached. aborting! watchers fired in last 5 iterations: [] 

so i'm rather stuck, , believe it's because don't understand how promise of ngresoure works. conclusions are:

• when used inside of controller bind $scope elements service works expected.

  • when bound $rootscope function appears stuck in kind of recursive loop.

i've boiled of down minimal code in single page unless have sharepoint 2013 or office365 site code won't run. i'll share if thinks valuable discussion think it's lack of understanding that's causing it.

when invoke function within interpolation {{xxx()}} need careful. interpolation runs every digest cycle , calling function within that, well, within function making service call or again triggers digest cycle (ex:- after has resolved/rejected , every promise chain resource call) or if returns different object reference (with ng-bind), interpolation expression gets evaluated again stabilize view. angular go on hoping view stable after every digest cycle, apparently not. angular loop till max limit of 10 times (internally set configurable though not solve problem) internally , stops trying stabilize displaying error see in console.

just make call when event triggered , not sure why want that. in controller right away when instantiated , bind data property view. or bind function myglobalfunc('foo') during specific event happens.

so appropriate way be:

when used inside of controller bind $scope elements service works expected.

here simple enough example replicate issue:

angular.module('app', []).run(function($rootscope, $q) {    $rootscope.showdata = function() {      var obj = {};      $q.when('hey').then(function(data) {        obj.name = data;      });      return obj;      }  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="app">    {{showdata().name}}  </div>