AngularJS $location.path(path) not updating at first

Question

I have a piece of code where I call $location.path(name) and nothing seems to happens (at first). I can call console.log($location.path()) and it does show the new path -- but the view doesn't change.

Chain of events (some asynchronous): I have two controllers (and matching views), MainCtrl and CpugraphCtrl, and a Service GetDataService and one external data API (Google).

button in Main view calls
 function in MainCtrl that calls
  function in GetDataService that  calls
    google client API gapi.client.load() with a callback to
     function in GetDataService, which uses $rootScope.$broadcast('GraphUpdate',..);

in MainCtrl, $scope.$on('GraphUpdate',function() {..}) calls
  $location.path('cpuGraph');

I can verify (mentioned above) that all the pieces go -- but the view doesn't re-render. If I click the button a second time, it does chnage views and re-render using my CpugraphCtrl. If I call $scope.$apply() right after $location.path() it also re-renders (sometimes) but also sometimes reports (on the console) an error in angular.js....

Should I be calling $scope.$apply() somewhere else?

--- edit -- adding route config --

angular.module('analytics2App', [
  'ngResource', 'googlechart'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/cpuGraph', {
        templateUrl: 'views/cpuGraph.html',
        controller: 'CpugraphCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Answer 1

Okay, at last I got this to work. As I suspected, it's a matter of getting $scope.$apply() in the right place.

Google Analytics calls have a callback inside a callback and the inner callback has parameters. So in the end I do this inside my AngularJS service:

// this function will be an Angular service (see last line)

var Graphdata = function($rootScope) {
    var gAPIResult;
    // called by apiQuery
    var handle_results = function(results) {
        gAPIResult = results;
        $rootScope.$apply(function() {
            /* ...
            use "gAPIResult" instead of "results" and call
            $rootScope.$broadcast('GraphUpdate', 1);
            on success
            ... */
        });
    };
    var compare_mobile_cpus = function() {
        var queryParams, apiQuery;
        queryParams = { /* could be anything */
            'ids': 'ga:78752930',
            'start-date': '2013-11-07',
            'end-date': '2013-11-09',
            'metrics': 'ga:visits',
            'dimensions': 'ga:EventLabel,ga:date' ,
            'filters': 'ga:eventAction==cputype'
        };
        try {
            apiQuery = gapi.client.analytics.data.ga.get(queryParams);
            apiQuery.execute(handle_results);
        } catch (e) {
            return false;
        }
        return true;
    };
   return {
        init_n_load: function() { // called from the controller
            gapi.client.setApiKey('AIzaSyCGcXFQzom1vE5-s');  // API KEY
            gapi.client.load('analytics', 'v3', compare_mobile_cpus);
        },
    };
};

angular.module('analytics2App').service('Graphdata', Graphdata);

that is, init_n_load() has callback compare_mobile_cpus() which has callback handle_results() which contains $rootScope.$apply()... and because that last callback has a results parameter, I have to stash it on the service before launching $apply()

This does work... but is it an optimal pattern? Saving "results" feels a little dirty.