Angularjs ui.router chid states not loading - angularjs

Question

I've been trying to figure this out for 3 days ....
I have an admin module:
'use strict';
angular.module('aaBlogger.admin',['aaBlogger.admin.controllers']);
angular.module('aaBlogger.admin').config(['$stateProvider', function($stateProvider){
$stateProvider.state('admin',{
url: '/admin',
abstract: true,
controller: 'AdminController',
templateUrl: 'modules/admin/views/admin.home.html'
}).state('admin.postNew',{
url: '/post/new',
controller: 'PostCreationController',
templateUrl: 'modules/admin/views/admin.new.post.html'
}).state('admin.postUpdate',{
url: '/post/:id/edit',
controller: 'PostUpdateController',
templateUrl: 'modules/admin/views/admin.update.post.html'
}).state('admin.postViewAll',{
url: '',
controller: 'PostListController',
templateUrl: 'modules/admin/views/admin.all.posts.html'
});
}]
);
Admin home page loads into index.html just fine. However I cant figure out how to load admin.postNew state template into admin.home.html template
Admin home template
<div class="row">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked on-click-make-active">
<li><a ui-sref="admin.postViewAll">View All Posts</a></li>
<li class="active"><a ui-sref="admin.postNew">Add Post</a></li>
</ul>
</div>
<div class="col-xs-9 border-left">
<div ui-view></div>
</div>
</div>
Just in case here is admin.postNew template
<div class="row" ng-controller="PostCreationController">
<div class="col-xs-8">
<form name="newPostForm" class="form-horizontal" novalidaterole='form'>
<div class="form-group" ng-class="{'has-error':postForm.title.$dirty && postForm.title.$invalid}">
<label for="title" class="col-sm-2 control-label">Post Title</label>
<div class="col-sm-10">
<input type="text" name="title" ng-model="post.title" ng-required="true" class="form-control" id="title" placeholder="Title">
<span>Permalink:<i>/posts/[id]/{{post.title | permalink}}</i></span> <br/>
<span class="error-message" ng-show="postForm.title.$dirty && postForm.title.$invalid">Title is mandatory boss!</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':postForm.content.$dirty && postForm.content.$invalid}">
<label for="content" class="col-sm-2 control-label">Content</label>
<div class="col-sm-10">
<textarea cols="8" rows="6" name="content" class="form-control" ng-model="post.content" ng-required="true" id="content" placeholder="Content"></textarea>
<span>{{post.content | wordcount}} words</span> <br/>
<span class="error-message" ng-show="postForm.content.$dirty && postForm.content.$invalid">You need to have some content!</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':postForm.tags.$dirty && postForm.tags.$invalid}">
<label for="tags" class="col-sm-2 control-label">Tags</label>
<div class="col-sm-10">
<input type="text" name="tags" class="form-control" id="tags" ng-pattern="/^[\w,]+$/" ng-model="post.tags" placeholder="Comma separated tags"/>
<span class="error-message" ng-show="postForm.tags.$dirty && postForm.tags.$invalid">Sorry! No special characters allowed here.</span>
</div>
</div>
<div class="form-group" ng-class="{'has-error':postForm.keywords.$dirty && postForm.keywords.$invalid}">
<label for="keywords" class="col-sm-2 control-label">Keywords</label>
<div class="col-sm-10">
<input type="text" name="keywords" class="form-control" id="keywords" ng-pattern="/^[\w,]+$/" ng-model="post.keywords" placeholder="Comma separated keywords"/>
<span class="error-message" ng-show="postForm.keywords.$dirty && postForm.keywords.$invalid">Sorry! No special characters allowed here</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success" ng-disabled="postForm.$invalid">{{buttonText}}</button>
</div>
</div>
</form>
</div>
</div>

Answer 1

I had a similar problem. its solution
admin.home.html must have tag <div ui-view="content"></div>
angular.module('aaBlogger.admin').config(['$stateProvider', function($stateProvider){
$stateProvider.state('admin',{
url: '/admin',
abstract: true,
templateUrl: '<div ui-view=""></div>'
})
.state('admin.postNew',{
url: '/post/new',
views: {
'': {
templateUrl: 'modules/admin/views/admin.home.html',
controller: 'AdminController'
},
'content#admin.postNew': {
templateUrl: 'modules/admin/views/admin.new.post.html',
controller: 'PostCreationController'
}
}
})
}]
);