UI-Router Child/nested state does not load - angularjs

Question

I've had a look at similar questions, but their problem seems to resolve around the lack of <ui-view /> tag in the parent HTML. Here, it's not the case.
I have a child state that does not load:
routes.js
angular.module('myapp').config(function($stateProvider, $locationProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
//A bunch of unrelated routes
$stateProvider.state({
'name': 'users',
'url': '/users',
'controller': 'usersCtrl',
'templateUrl': '/scripts/pages/users/users.html'
});
$stateProvider.state({
'name': 'users.editeduser',
'url': '/editeduser',
'template': '<h1>HELLO</h1>'
// 'templateUrl': '/scripts/pages/users/parts/editedUser.html',
// 'controller': 'editedUserCtrl'
// 'resolve': {
// editedUserId: function(editedUserId) {
// return editedUserId;
// }
// }
});
users.html
<div class="panel panel-default">
<div class="panel-heading">
<h3>Users List</h3>
</div>
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item" ng-repeat="user in users track by $index">{{user.firstname + " " + user.lastname}}</li>
</ul>
<ui-view name="users.editeduser"></ui-view>
</div>
<div class="panel-footer">
<button class="btn btn-primary" ui-sref="user-edit">New User</button>
</div>
</div>
In the html code uiview line, I tried using <ui-view name=".editeduser"></ui-view> and I also tried just <ui-view name="editeduser"></ui-view> to no avail. I even tried <div ui-view=....
As you can see in the commented out routes.js code, there is a supposed controller and html template that the child is supposed to have, but I removed them for the sake of trying to work out the problem.
In Chrome Dev Tools, this is the output:
Any help would be appreciated. Thanks

Answer 1

The ui-sref for the button doesn't match the url for that state:
<div class="panel-footer">
<!-- ERRONEOUS
<button class="btn btn-primary" ui-sref="user-edit">New User</button>
-->
<!-- INSTEAD -->
<button class="btn btn-primary" ui-sref="users/editeduser">New User</button>
</div>
I think you're onto something though because at no where to I call the child state in my code, and I think I need to call it for it to be loaded, but I am not sure of how to. I'll try to look at the documentation and see –
The UI-Router for AngularJS (1.x) - Hello Galaxy! Tutorial has a DEMO that shows a state with a list of people. The child view with information on an individual only becomes visible when the person is selected.
The DEMO on PLNKR