Change Binding in main window after being called with $routeProvider

Question

Change Binding in main window after being called with $routeProvider

I call a my controller with $routeProvider like this:

$routeProvider
    .when('/home', {
        templateUrl: "partials/main.html",
        controller: "AppCtrl"
    });

So the focus of $scope in the controller will change only the content of partials/main.html.
I would need to change {{status}} in index.html, but it won't change if I do $scope.status = 'ready'; in the controller, it will change only if it was in main.html.
How can I make this work ?
Thank you very much.

angularjs

Answer 1

The scope associated with AppCtrl should prototypically inherit from the scope associated with the controller you have defined in index.html. Define a method on that controller, and then you can call it from your child controller/scope (because of the way JavaScript prototypal inheritance works):

function MainCtrl($scope) {
   $scope.updateStatus = function(newStatus) {
       $scope.status = newStatus;
   }
}

function AppCtrl($scope) {
   ...
   $scope.updateStatus(....);
}

Fiddle. In the fiddle, I don't use ng-view, but it still shows the concept.