title: angular ui-router stateParams persisting
body: <p>i am using ui-router for my SPA but I am having issues with the states. My state is setup as below</p>
  
  <pre><code>$stateProvider.state('product', {
      url: '/product/:category/:product',
      templateUrl: 'src/app/product/product.tpl.html',
      controller: 'ProductCtrl'
  });
  </code></pre>
  
  <p>But the issue I am having is that when I go to /product/cat-one my controller handles the fact there is no product set, then when i go to /product/cat-one/product-one my controller again handles the fact there is a product present, which all works well. </p>
  
  <p>The problem im facing is that if i go to /product/cat-two from /product/cat-one/product-one the :product persists and the url ends up being /product/cat-two/product-one.</p>
  
  <p>Can anybody point me in the right direction on this one please?</p>
  
  <p>This is my controller for reference:</p>
  
  <pre><code>.controller( 'ProductCtrl', function ( $scope, $stateParams, ProductService ) {
    $scope.categoryId  = $stateParams.category;
    $scope.productId   = $stateParams.product;
    $scope.isProduct   = false;
  
    if ($scope.productId) {
        $scope.isProduct = true;
        $scope.item = ProductService.getProduct($scope.categoryId);
    } else {
        $scope.item = ProductService.getCategory($scope.categoryId);
    }
  })
  </code></pre>
  
  <p>Thanks in advance</p>