title: UI-Router nested templates parent variable change not reflected in child
body: <p>States declared like this. As you can see there is a state called "market" with a sub-state called "list". They share the controller, but have different templates.</p>
  
  <pre><code>.state('market', {
              url: '/market',
              templateUrl: '/market',
              controller: 'MarketController',
              access: { requiredLogin: true }
          }).state('market.list', {
              url: '/list',
              templateUrl: '/market/list',
              controller: 'MarketController',
              access: { requiredLogin: true }
          })
  </code></pre>
  
  <p>In the controller I have declared a variable, $scope.activeProduct, whose value can be modified by clicking on a button in the "market.*".</p>
  
  <p><strong>I have placed {{activeProduct}} in both of the templates. When the button is clicked, the value only changes in the "market.*" part.</strong> </p>
  
  <p>This is the function that is triggered upon clicking the button:</p>
  
  <pre><code>        $scope.switchProduct = function (id) {
          $timeout(function() {
              $scope.$apply(function(){
                      $scope.activeProduct = id;
                      MarketStorageService.activeProduct = id;
                      console.log("activeproduct changed to" + id);
                  }
              );
          });
      };
  </code></pre>
  
  <p>I just don't understand why in the "market.list" the value does not change.</p>