title: Giving route controller priority in AngularJS
body: <p>I was following this tutorial and everything went well: <a href="http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating" rel="nofollow">http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating</a></p>
  
  <p>Except I <code>$scope.message</code> is being changed fine in <code>/about</code> and <code>/contact</code> while adding a new scope (<code>$scope.prodoc</code>) in the exact same way is not working. Instead it's displaying the mainController scope on every page.</p>
  
  <p>Here are the three controllers:</p>
  
  <pre><code>calculatorApp.controller('aboutController', function($scope, $http) {
          //define the hardware data
          $scope.prodoc = 'companyb';
          $scope.message = 'Look! I am an about page.';
  
      });
  
      calculatorApp.controller('contactController', function($scope, $http) {
          $scope.prodoc = 'companya';
          $scope.message = 'Contact us! JK. This is just a demo.';
      });
  
  
      // create the controller and inject Angular's $scope
      calculatorApp.controller('mainController', function($scope, $http) {
  
          //define the hardware data
          $scope.prodoc = 'sdf';
  
          // create a message to display in our view
          $scope.message = 'Everyone come and see how good I look!';
  </code></pre>
  
  <p>The body tag is in a <code>&lt;body ng-controller="mainController"&gt;</code></p>
  
  <p>I am guessing that the <code>mainController</code> is taking priority and therefore not updating for each routed controller. </p>
  
  <p>How do I force it to take the route-specific value?</p>
  
  <p>EDIT:
  Here's the router config:</p>
  
  <pre><code>calculatorApp.config(function($routeProvider) {
          $routeProvider
  
              // route for the home page
              .when('/', {
                  templateUrl : 'pages/home.html',
                  controller  : 'mainController'
              })
  
              // route for the about page
              .when('/about', {
                  templateUrl : 'pages/about.html',
                  controller  : 'aboutController'
              })
  
              // route for the contact page
              .when('/contact', {
                  templateUrl : 'pages/contact.html',
                  controller  : 'contactController'
              });
      });
  </code></pre>
  
  <p>Although I don't actually have anything to display in the template. I just need the routing for the data (<code>prodoc</code>)</p>