AngularJS UI Router - open state with data in new browser tab

Question

I having problems trying to open a state in a new browser tab. It should resolve the async call to populate the data when it opens in the new browser tab. Is this possible to do with angularjs ui router?

Here's my ui router settings:

.state('snapshots.user_detail', {
  url: "/user/detail/{userID:[0-9]+}",
  templateUrl: function($stateParams) {
    return "user/detail/" + $stateParams.userID;
  },
  controller: "userDetailCtrl as userDetailCtrl",
  resolve: {
    async: ['userService', '$stateParams',
      function(userService, $stateParams) {
        alert("running detail ctrl async");
        return userService.getUser($stateParams.userID);
      }
    ]
  }
})

userDetailCtrl:

function userDetailCtrl($scope, async) {
  "use strict";
  var self = this;
  self.user = async;
}

Answer 1

Well Seems that my problem is related to enabling html5mode in angularjs.

To continue to use html5mode, I can do a url rewrite as suggested by angular ui router's website, or redirect all my routes at the backend to point to the index like this case:

Spring Boot with AngularJS html5Mode

I could just disable html5mode altogether as I realize it supports what I need by default.

People tend to open links in new browser tabs. I'm trying to cater to this need actually.