query parameters not working with ui-router

I need to route to state using complete url with query parameters and perform action in controller according to query parameters.

It works fine if I use simple routing url with variables like : "/load/:portName/:id"

It doesn't work if I will add queryparameters : "/load?portName&id"

Above should be accessible with url : "/load?portName=TEST&id=343"

I am posting my code snippet below for routes and controller defined in html:

       $stateProvider
        .state('route0', {
            url:"/",
            templateUrl: '/one.html'
        })
        .state('route1', {
            url:"/starZoom",
            templateUrl: '/two.html'
        })
        .state('route2', {
            url: "/:name",
            templateUrl: function (urlattr) {
                return '/app/' + urlattr.name + '/' + urlattr.name + '.html';
            }
        })
      .state('route3', {
          url:"/load?portName&id",
          views: {
              templateUrl: '/one.html'
          }
        });

HTML :

<div class="viewPanel" 
   ng-controller="StatusSearchController as searchController"
   id="searchStatusContainer"> ....</div>

versions of angular and ui-router : "angular": "1.4.10", "angular-sanitize": "1.4.10", "angular-ui-router": "0.2.10"

I want to directly load route3 using url : localhost:4000/load?portName=test&id=45 Thanks

There is a working example

Switch the state definitions.. firstly the more specific, next the general

  .state('route3', {
    url:"/load?portName&id",
    templateUrl: 'tpl.html',
  })
  .state('route2', {
    url: "/:name",
    templateUrl: 'tpl.html',
  })

These will work now

<a href="#/starZoom">
<a href="#/name">
<a href="#/load?portName=test&amp;id=45">

So, /:name would also match /load, but if /load is defined first, it will be used...

Check it here