Issue with child state on page reload

```
(function () {
'use strict';

angular.module('app.dashboard.pricing', [
'app.dashboard.pricing.items'
]).config(routeConfigPricing);

angular.module('app.dashboard.pricing.items',
[]).config(routeConfigPricingItems);

/** @ngInject */
function routeConfigPricing($stateProvider){
$stateProvider
.state('dashboard.pricing', {
url: '/pricing',
abstract: true
});
}

/** @ngInject */
function routeConfigPricingItems($stateProvider, $urlRouterProvider){
$stateProvider
.state('dashboard.pricing.dashboard', {
url: '/dashboard',
title:'Pricing Dashboard',
views: {
'content@dashboard':{
templateUrl:'app/dashboard/pricing/pricing.html',
controller: 'Pricing as vm'
}
},
pageHeader:{
subTitle: 'Product',
tiviews: {
'content@dashboard':{

}
},tle:'Pricing'
}
})
.state('dashboard.pricing.market',{
url:'/market',
title: 'Price Market',
pageHeader:{
subTitle: 'Add',
title: 'Price Market'
},
views:{
'content@dashboard':{
templateUrl: 'app/dashboard/pricing/priceMarket.html',
controller: 'PriceMarket as vm'
}
},
resolve:{
'allMarkets': function(pricing){
return pricing.getAllPriceMarkets().then(function(response){
return (response.data.pricingMarket);
});
}
}

})
.state('dashboard.pricing.productItems', {
url: '/products',
title:'Pricing ',
pageHeader:{
subTitle: 'Add',
title:'Product Price'
},
resolve:{
'allPriceItems': function(pricing){
return pricing.getAllProductItemPrice().then(function(res){
return res.data.allPrices;
})
}
},
views: {
'content@dashboard':{
templateUrl:'app/dashboard/pricing/productPricing.html',
controller:'ProductPricing as vm'
}
}
});

$urlRouterProvider.when('/pricing','/pricing/market');
}

})();
```

The above are child states and parent states I have created My states works fine but when the page reloads lets say on one of the child states the page does not loads Can any one help