Routing with tabs and nested screens

I am trying to figure out how to best organize the routing for my app. I have tried to use the Tabs Sample as a guide, but am not having much luck unfortunately.

My app is a tabs app with the tabs below:

  • Feed (Shows items from all users in the system)
  • Tags (a screen that whos a items with a particular tag)
  • User Profile (takes you to the Current Users profile screen)
  • Notifications (shows activity from your friends)

I am trying to figure out how to configure the routing such that I can do the following:

  • On the feed, I click on a users profile image. This takes me to that users profile screen. At this point I would like to have a “Back” button in the top left to take the user back to the feed.
  • Similarly, on the Notifications screen, if I click a users profile image, it takes me to that users profile screen. I would like a “Back” button here as well to take you back to the Notification screen.

This is probably far simpler than I’m making it to be, but below is my current app state routing. Any help would be much appreciated!

        .state('app.feed', {
            url: '/feed',
            views: {
                'app-feed': {
                    templateUrl: 'templates/feed.html',
                    controller: 'FeedCtrl'
                }
            },
            resolve: {
                feed: function ($stateParams, FeedService) {
                    return FeedService.getFeed(0, null, true);
                }
            }
        })

        .state('app.notifications', {
            url: '/notifications',
            views: {
                'app-notifications': {
                    templateUrl: 'templates/notifications.html',
                    controller: 'NotificationsCtrl'
                }
            },
            resolve: {
                notifications: function ($stateParams, NotificationsService) {
                    // return NotificationsService.getNotifications();
                     return NotificationsService.getActivity(0, true);
                }
            }
        })

        .state('app.user-profile', {
            url: '/users/:userId',
            views: {
                'app-user-profile': {
                    templateUrl: 'templates/user-profile.html',
                    controller: 'UserProfileCtrl'
                },
                //'app-notifications': {
                //    templateUrl: 'templates/user-profile.html',
                //    controller: 'UserProfileCtrl'
                //},
                //'app-feed': {
                //    templateUrl: 'templates/user-profile.html',
                //    controller: 'UserProfileCtrl'
                //},
                //'app-discover': {
                //    templateUrl: 'templates/user-profile.html',
                //    controller: 'UserProfileCtrl'
                //}
            },
            resolve: {
                user: function ($stateParams, UsersService) {
                    return UsersService.getUser($stateParams.userId, true);
                }
            }
        })