Angular promises

Question

I am running into an asynchronous issue with my stats controller. I have a controller that queries the db and returns the objects. In this controller I use the filter to get the ones with the platform Facebook and I put this into $rootScope.facebookObjects .

First controller:

    app.controller('statsCtrl', function ($scope, $log, $http, $timeout, $filter, Data, $rootScope) {
    Data.get('stats').then(function(data){
        $scope.stats = data.data;
        $scope.currentPage = 1; //current page
        $scope.filteredItems = $scope.stats.length; //Initially for no filter  
        $scope.totalItems = $scope.stats.length;
        $scope.list_pages = [
                {
                    id: '5',
                    name: '5'
                }, {
                    id: '10',
                    name: '10'
                }, {
                    id: '20',
                    name: '20'
                }, {
                    id: '50',
                    name: '50'
                }, {
                    id: '100',
                    name: '100'
                }
            ];
        $scope.maxSize = 5;

        $rootScope.facebookObjects = $filter('filter')($scope.stats, { platform: "facebook" });
        $rootScope.twitterObjects = $filter('filter')($scope.stats, { platform: "twitter" });
    });
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    $scope.filter = function() {
        $timeout(function() { 
            $scope.filteredItems = $scope.filtered.length;
        }, 10);
    };
    $scope.sort_by = function(predicate) {
        $scope.predicate = predicate;
        $scope.reverse = !$scope.reverse;
    };

});

I have a second controller that uses the $rootScope.facebookObjects to populate the chart. The problem is I need to wait until the $rootScope.facebookObjects has a value. Currently my console log shows undefined. I am looking into promises but I am a little unsure which controller to use it in and how to properly use it.

Second Controller:

app.controller("PieCtrl", function ($scope, $rootScope, $timeout, $log) {
    $log.log('facebook - '+$rootScope.facebookObjects.length);
});

Answer 1

$rootScope.$watch('facebookObjects', function(newValue, oldValue) {
  //do your job
});

while you could use $watch to watch it, but i'm not sure it's a good way to share data between the controllers, and even more data is acync.

Answer 2

I have created an example for you with angular factory :

HTML:

<div ng-app="jsfiddle">
    <div ng-controller="MainCtrl">
        Data: {{data}}<br>
    </div>

    <div ng-controller="SecondCtrl">
        Data: {{data}}<br>
    </div>
</div>

Angular:

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

app.factory('myService', function($http) {
  return {
    async: function() {
      return $http.get('https://api.myjson.com/bins/1v21f');  
    }
  };
});

app.controller('MainCtrl', function( myService,$rootScope, $scope, $timeout) {
    $scope.data = "oron";
  myService.async().then(function(d) { 
    $timeout(function() {
                $rootScope.data = d;
            }, 1000);

  });
});

app.controller('SecondCtrl', function($rootScope, $scope, $timeout) {
    $scope.test = $rootScope.data;

});

MainCtrl is calling myService and store the response on the $rootScope . then the when the value is ready it will update the data object on the SecondCtrl .

Answer 3

Thank you everyone for your help. Here is what I came up with based off of your answers.

First Controller:

$scope.facebookObjects = $filter('filter')($scope.stats, { platform: "facebook" });
$scope.twitterObjects = $filter('filter')($scope.stats, { platform: "twitter" });

$scope.$broadcast('update_chart_controller', { 
    fb: $scope.facebookObjects, 
    tw: $scope.twitterObjects 
});

Second Controller:

$scope.$on("update_chart_controller", function(event, args) {
   $scope.data = [args.fb.length, args.tw.length];
});