angular UI router nested state not shown

There is a working plunker

Very often in this cases, we forget to create a target for a child. Other words, parent state template templateUrl: "partials/locations.html" should contain

<div ui-view=""></div> 

So in the plunker we can see parent 'partials/locations.html' template:

<div> <h2>parent</h2> <hr /> <div ui-view=""></div> // this is the key to show child </div> 

And the child 'partials/location.html' could be e.g.:

<div> <h3>current state name: <var>{{$state.current.name}}</var> </div> 

Check it here

In case, we want to target the index.html ui-view="", we have to use absolute naming. Check the adjusted plunker here

.state('locations.location', { params: { locationId : "defaultID", locationName: "defaultName" }, url: "/:locationName", views: { '@' : { controller: "LocationCtrl", templateUrl: "partials/location.html", resolve: { loc: function($http, $stateParams) { var url = "url/to/service/" + $stateParams.locationId + "/en"; return $http.get(url) .then(function(res){ return res.data; }); } } } 

check it here

The documentation and explanation:

View Names - Relative vs. Absolute Names

Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname@statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

For example, the previous example could also be written as:

.state('report',{ views: { 'filters@': { }, 'tabledata@': { }, 'graph@': { } } }) 

Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your index.html.