There is a data field named $uiView attached to the ui-view element, it contains the view name and the associated state. You can get the state like this:
elem.closest('[ui-view]').data('$uiView').state
or even
elem.inheritedData('$uiView').state
So, in your controller:
.controller('State1Ctrl', function ($state) {
console.log(elem.closest('[ui-view]').data('$uiView').state); // state1
console.log($state.current.name) ;//will give the state name as well.
});
UPDATE:
Your issue: https://github.com/angular-ui/ui-router/issues/1651
WORKAROUND:
ANGULAR-UI-ROUTER: Resolve state from URL
You can expose the internal state implementation by using the .decorator hook on $stateProvider. You can decorate any property of the state builder; somebody chose 'parent' arbitrarily.
app.config(function($stateProvider) {
$stateProvider.decorator('parent', function (internalStateObj, parentFn) {
// This fn is called by StateBuilder each time a state is registered
// The first arg is the internal state. Capture it and add an accessor to public state object.
internalStateObj.self.$$state = function() { return internalStateObj; };
// pass through to default .parent() function
return parentFn(internalStateObj);
});
});
Now you can access the internal state object using .$$state(), e.g.
var publicState = $state.get("foo");
var privateInternalState = publicState.$$state();
//Second, loop over each state in $state.get() and test them against your URL fragment.
angular.forEach($state.get(), function(state) {
var privatePortion = state.$$state();
var match = privatePortion.url.exec(url, queryParams);
if (match) console.log("Matched state: " + state.name + " and parameters: " + match);
});
console.log($state)and inspect what's there