The reason you would use an abstract state is to keep your definition dry when you have a part of your url non-navigable. For example, say that you had a url scheme like the following:
/home/index
/home/contact
However, for whatever reason in your design, this url was invalid (i.e. no purpose for a page):
/home
Now you could simply create two states for this situation, with the complete urls, however then you would be writing /home/ twice, and the description is a bit more convoluted. The best idea instead is to create a home abstract parent of which the two other states are children (for ui-router docs):
$stateProvider
.state('parent', {
url: '/home',
abstract: true,
template: '<ui-view/>'
})
.state('parent.index', {
url: '/index',
templateUrl: 'index.html'
})
.state('parent.contact', {
url: '/contact',
templateUrl: 'contact.html'
})
Just notice that inside the parent state, we assign a template whose only child is a ui-view. This ensures that the children are rendered (and might be why yours is appearing blank).
Sometimes you might notice the use of an abstract state with a blank url. The best use of this setup is when you need a parental resolve. For example, you may require some particular server data for a subset of your states. So instead of putting the same resolve function into each of your states, you could create a blank url parent with the desired resolve. It could also be useful if you want hierarchical controllers, where the parent has no use for a view (not sure why you would want this, but it is plausible).