View not getting rendered - Ionic - angularjs

Question

I'm trying to render templates inside a main view. Here is the Feed, which is my main view.
<ion-view view-title="Feed">
<ion-content scroll="true">
<div ui-view="opportunity"></div>
</ion-content>
</ion-view>
I'm trying to render Opportunity inside my Feed. Here is the code for Opportunity. The template is named as card-opportunity.html
<h1>Opportunity Details</h1>
In the app.js I have included the views for opportunity. I'm using $stateProvider
$stateProvider
.state('app.feed', {
url: '/feed',
views: {
'menuContent': {
templateUrl: 'templates/feed.html',
controller: 'FeedCtrl'
},
'network' : {
templateUrl: 'templates/card-network.html',
controller: 'CardNetworkCtrl'
},
'opportunity' : {
templateUrl: 'templates/card-opportunity.html',
controller: 'CardOpportunityCtrl'
}
}
});
Not sure what I'm missing. There is no error in the console. I'm using ionic: 3.7.0

Answer 1

https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views
says this:-
"Child states will load their templates into their parent's ui-view."
I am not sure if a view will load if you give its ui-sref in its sibling view. Why don't you create a new state for the opportunity ,so that it loads as a child of the feed.
$stateProvider
.state('app.feed', {
url: '/feed',
views: {
'menuContent': {
templateUrl: 'templates/feed.html',
controller: 'FeedCtrl'
},
'network' : {
templateUrl: 'templates/card-network.html',
controller: 'CardNetworkCtrl'
}
}
})
.state('app.feed.opportunity',{
url: '/opportunity',
views: {
'opportunity' : {
templateUrl: 'templates/card-opportunity.html',
controller: 'CardOpportunityCtrl'
}
}
});