ui-grid and ui-router navigation issue

<!DOCTYPE html>
<html ng-app="myapp">

<head>
    <title>AngularJS: UI-Router Quick Start</title>
    <!-- Bootstrap CSS -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
</head>

<body class="container">
  <p>
  This plunker shows an issue using ui.grid cellnav feature along with UI-Router.
  <br />
  To see the issue, click on the link "Test" for route 2 on the home page (second row of table).
  <br />
  This will take you to the Route 2 page. Then hit the back button and notice you stay on the Route 2 page instead of going back to route one.
  <br />
  Changing the URL to be unencoded (#/route2?id=asdf:sdfsdf instead of #/route2?id=asdf%3Asdfsdf) then the issue does not happen.
  <br />
  This has to do with the <a target="_new" href="https://github.com/angular-ui/ui-grid/blob/8f53459b48dcebdf0d193c99874fc436acd28cc6/src/features/cellnav/js/cellnav.js#L1044">the following line</a> calling stopPropagation which is preventing an event from getting to UI-router is my guess.
  </p>

  <div class="navbar">
    <div class="navbar-inner">
      <a class="brand" href="#">Quick Start</a>
      <ul class="nav">
        <li><a ui-sref="route1">Route 1</a></li>
        <li><a ui-sref="route2">Route 2</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="span12">
      <div class="well" ui-view></div>        
    </div>
  </div>         
  
  <!-- Angular -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <!-- UI-Router -->
  <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
          <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
  
  <!-- App Script -->
  <script>
    var myapp = angular.module('myapp', ["ui.router", 'ui.grid',         "ui.grid.cellNav",
        "ui.grid.edit",
        "ui.grid.infiniteScroll",
        "ui.grid.resizeColumns",
        "ui.grid.rowEdit",
        "ui.grid.selection"])
    myapp.config(function($stateProvider, $urlRouterProvider){
      
      // For any unmatched url, send to /route1
      $urlRouterProvider.otherwise("/route1")
      
      $stateProvider
        .state('route1', {
            url: "/route1",
            templateUrl: "route1.html",
            controller: function($scope) {
                $scope.gridOptions = {
    minRowsToShow: 2,
    enableHorizontalScrollbar: 1
  };

  $scope.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name', displayName: 'Name' },
    { name: 'link' , cellTemplate: "<div><a ng-href='{{COL_FIELD}}'>Test</a></div>"}
  ];

             $scope.gridOptions.data = [{name: "route1", link: "#/route1"}, {name: "route2", link: "#/route2?id=asdf%3Asdfsdf"}]; 
            }
        })
          .state('route1.list', {
              url: "/list",
              templateUrl: "route1.list.html",
              controller: function($scope){
                $scope.items = ["A", "List", "Of", "Items"];
              }
          })
          
        .state('route2', {
            url: "/route2",
            templateUrl: "route2.html",
            controller: function($scope) {
                $scope.gridOptions = {
    minRowsToShow: 2,
    enableHorizontalScrollbar: 1
  };

  $scope.gridOptions.columnDefs = [
    { name: 'id' },
    { name: 'name', displayName: 'Name' },
    { name: 'link' , cellTemplate: "<div><a ng-href='{{COL_FIELD}}'>Test</a></div>"}
  ];

             $scope.gridOptions.data = [{name: "test", link: "#/route1"}, {name: "test", link: "#/route2"}]; 
            }
        })
          .state('route2.list', {
              url: "/list",
              templateUrl: "route2.list.html",
              controller: function($scope){
                $scope.things = ["A", "Set", "Of", "Things"];
              }
          })
    })
  </script>

</body>

</html>

<h1>Route 1</h1>
<hr/>
<div ui-grid="gridOptions"         
ui-grid-cellnav
         ui-grid-edit
         ui-grid-infinite-scroll
         ui-grid-resize-columns
         ui-grid-row-edit
         ui-grid-selection class="grid"></div>
<a ui-sref=".list">Show List</a>
<div ui-view></div>

<h1>Route 2</h1>
<hr/>
<div ui-grid="gridOptions"         
ui-grid-cellnav
         ui-grid-edit
         ui-grid-infinite-scroll
         ui-grid-resize-columns
         ui-grid-row-edit
         ui-grid-selection class="grid"></div>
<a ui-sref=".list">Show List</a>
<div ui-view></div>

<h3>List of Route 2 Things</h3>
<ul>
  <li ng-repeat="thing in things">{{thing}}</li>
</ul>

<h3>List of Route 1 Items</h3>
<ul>
  <li ng-repeat="item in items">{{item}}</li>
</ul>