Proper way of accessing the $scope within ng-view

Question

Here is my plunk.

I am using ngRoute.

I am trying to increment a value by ng-click, and when I click "Show total" link, it should load the ng-view template showing the value. However, it does not show the incremented value. It's like it's not accessing the scope.

What's wrong here?

Answer 1

You should remove MainCtrl controller from your $routeProvider when condition, which is loading MainCtrl again, and unnecessary scope has been created.

app.config(function($routeProvider){
  $routeProvider
  .when('/total',{
    templateUrl : 'template.html',
    //controller : 'MainCtrl' //<-- remove controller here
  })
});

Answer 2

It looks like you're resetting the value of $scope.total when it lands on the /total route. ng-init can be used to initialize the value of total outside of the controller